list里面的对象怎样拖到画面里？

问题：
list里面的对象怎样拖到画面里？

思路
把list里的对象直接拖到画面里的功能，在场景编辑器里常常用到，我们会放一个List，里面每一项对应一个建筑物，用户可以把建筑物拖拽到场景中。这也和flash的元件库拖拽东西到舞台是一样的效果。
我们可以在List的每一项中存储该项所对应的ClassName，当拖拽开始时，创建对应的实例，并让它跟随鼠标。直到在画面有效区域中松开鼠标才将其添加到新的DisplayObjectContainer内。

具体的我写了一个演示，右侧是List，请从里面把内容拖到左侧的框框里放下看效果。点击此处下载源文件。

Document Class :

package org.mousebomb.dragLiToCanvas 
{
	import fl.events.ListEvent;
	import fl.controls.List;
	import fl.data.DataProvider;

	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	import flash.utils.getDefinitionByName;

	/**
	 * @author Mousebomb (mousebomb@gmail.com)
	 * @date 2010-4-27
	 */
	public class DragListItemToCanvas extends Sprite 
	{
		public var list : List;
		public var canvas : Sprite;
		private var isHoverLi : Boolean = false;
		private var curHoverLi : Object ;

		public function DragListItemToCanvas()
		{
			//如果不写下面这一行，flash不会将此类编译进去，运行时会报错
			Class1;
			Class2;
			//创建list的内容
			list.dataProvider = new DataProvider();
			list.addItem({label:"有胆你就拖拽我", data:"org.mousebomb.dragLiToCanvas.Class1"});
			list.addItem({label:"我和楼上一样", data:"org.mousebomb.dragLiToCanvas.Class2"});
			list.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownH);
			list.addEventListener(ListEvent.ITEM_ROLL_OVER, onHoverLi);
			list.addEventListener(ListEvent.ITEM_ROLL_OUT, onOutLi);
			stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUpH);
		}

		private function onOutLi(event : ListEvent) : void
		{
			isHoverLi = false;
			curHoverLi = null;
		}

		private function onHoverLi(event : ListEvent) : void
		{
			isHoverLi = true;
			curHoverLi = event.item;
		}

		//松开鼠标
		private function onMouseUpH(event : MouseEvent) : void
		{
			//有拖拽物体
			if(curDraging)
			{
				curDraging.stopDrag();
				removeChild(curDraging);
				//在canvas上着陆
				if(canvas.hitTestPoint(event.stageX, event.stageY))
				{
					canvas.addChild(curDraging);
					curDraging.alpha = 1;
					var localPos : Point = canvas.globalToLocal(new Point(event.stageX, event.stageY));
					curDraging.x = localPos.x;
					curDraging.y = localPos.y;
				}
				curDraging = null;
			}
		}

		//记录当前拖拽
		private var curDraging : Sprite;

		private function onMouseDownH(event : MouseEvent) : void
		{
			if(curHoverLi)
			{
				var className : String = curHoverLi["data"];
				curDraging = getItemByClassName(className);
				curDraging.x = event.stageX;
				curDraging.y = event.stageY;
				curDraging.alpha = .6;
				addChild(curDraging);
				curDraging.startDrag();
			}
		}

		//获取对应的实例
		private function getItemByClassName(className : String) : Sprite
		{
			var cla : Class = getDefinitionByName(className) as Class;
			return new cla();
		}
	}
}

package org.mousebomb.dragLiToCanvas

{

import fl.events.ListEvent;

import fl.controls.List;

import fl.data.DataProvider;

import flash.display.Sprite;

import flash.events.MouseEvent;

import flash.geom.Point;

import flash.utils.getDefinitionByName;

/**

* @author Mousebomb (mousebomb@gmail.com)

* @date 2010-4-27

public class DragListItemToCanvas extends Sprite

{

public var list : List;

public var canvas : Sprite;

private var isHoverLi : Boolean = false;

private var curHoverLi : Object ;

public function DragListItemToCanvas()

{

//如果不写下面这一行，flash不会将此类编译进去，运行时会报错

Class1;

Class2;

//创建list的内容

list.dataProvider = new DataProvider();

list.addItem({label:"有胆你就拖拽我", data:"org.mousebomb.dragLiToCanvas.Class1"});

list.addItem({label:"我和楼上一样", data:"org.mousebomb.dragLiToCanvas.Class2"});

list.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownH);

list.addEventListener(ListEvent.ITEM_ROLL_OVER, onHoverLi);

list.addEventListener(ListEvent.ITEM_ROLL_OUT, onOutLi);

stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUpH);

}

private function onOutLi(event : ListEvent) : void

{

isHoverLi = false;

curHoverLi = null;

}

private function onHoverLi(event : ListEvent) : void

{

isHoverLi = true;

curHoverLi = event.item;

}

//松开鼠标

private function onMouseUpH(event : MouseEvent) : void

{

//有拖拽物体

if(curDraging)

{

curDraging.stopDrag();

removeChild(curDraging);

//在canvas上着陆

if(canvas.hitTestPoint(event.stageX, event.stageY))

{

canvas.addChild(curDraging);

curDraging.alpha = 1;

var localPos : Point = canvas.globalToLocal(new Point(event.stageX, event.stageY));

curDraging.x = localPos.x;

curDraging.y = localPos.y;

}

curDraging = null;

}

//记录当前拖拽

private var curDraging : Sprite;

private function onMouseDownH(event : MouseEvent) : void

{

if(curHoverLi)

{

var className : String = curHoverLi["data"];

curDraging = getItemByClassName(className);

curDraging.x = event.stageX;

curDraging.y = event.stageY;

curDraging.alpha = .6;

addChild(curDraging);

curDraging.startDrag();

}

//获取对应的实例

private function getItemByClassName(className : String) : Sprite

{

var cla : Class = getDefinitionByName(className) as Class;

return new cla();

}

10 Comments

草羽 | 四月 27th, 2010

额，这句是关键
var cla : Class = getDefinitionByName(className) as Class;
TonySan | 四月 28th, 2010

非常好感谢喔。我用的是flash builder 4 的组件,是一个spark主题，我用itemRenderer去渲染里面的子项目，拖动的问题解决了，可是我要怎么访问list的子项目呢？
鼠标炸弹 | 四月 28th, 2010

@TonySan, spark的不清楚，我很少用FB，你应该可以在文档上找到访问子项目的介绍吧。
郑州seo | 四月 29th, 2010

wp我就感觉到两个字复杂
郑州seo | 四月 29th, 2010

对了朋友你看看我的博客文章页面的title值你知道文章类别怎么调用并且没有a标签的吗
周汉修 | 四月 29th, 2010

钢好要用到LIST 的拖拽功能，谢谢共享
鼠标炸弹 | 四月 30th, 2010

后台-外观-编辑当前主题中的single.php，把标题的那部分代码由
<a href="< ?php the_permalink() ? rel="nofollow">" rel="bookmark">< ?php the_title(); ?></a>
改成
< ?php the_title(); ?>
TonySan | 五月 10th, 2010

感觉首页进来的link 有点怪。
swappy | 六月 5th, 2010

博主flash高手。顶了