How do you drag objects in the list into the canvas?

Question: How do you drag an object from a list onto the canvas?

Approach The ability to drag an object from a list straight onto the canvas is something you often need in a scene editor. You put a List on screen, each item corresponds to a building, and the user can drag the building into the scene. It works the same way as dragging things from the Flash library onto the stage. We can store the ClassName corresponding to each item in that item; when dragging starts, we create an instance of it and let it follow the mouse. Only when the mouse is released over a valid area of the canvas do we add it to the new DisplayObjectContainer.

I wrote a demo for the details. The List is on the right — try dragging its contents into the box on the left and dropping them to see the effect. Click here to download the source files.

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()
{
//If you don’t write the following line, flash won’t compile this class in, and you’ll get an error at runtime
Class1;
Class2;
//Create the list contents
list.dataProvider = new DataProvider();
list.addItem({label:”Drag me if you dare”, data:”org.mousebomb.dragLiToCanvas.Class1”});
list.addItem({label:”I’m the same as the guy above”, 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;
}

//Mouse released
private function onMouseUpH(event : MouseEvent) : void
{
//There is a dragged object
if(curDraging)
{
curDraging.stopDrag();
removeChild(curDraging);
//Land on the 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;
}
}

//Record the current drag
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();
}
}

//Get the corresponding instance
private function getItemByClassName(className : String) : Sprite
{
var cla : Class = getDefinitionByName(className) as Class;
return new cla();
}
}
}