Drag and drop between Feathers components (Starling version)
The following description of How to use the
DragDropManager
is taken from this forum thread. This text combines multiple posts into a single source, without much editing, so refer to the linked thread if some context is missing. More thorough documentation will be added in the future.
In the
examples/DragDrop
directory that comes with Feathers, you can find a simple, working example of theDragDropManager
.
You need to implement the
IDragSource
andIDropTarget
interfaces on the appropriate objects.Call
DragDropManager.startDrag()
, passing in theIDragSource
, theTouch
object that initiated the drag, and aDragData
object which stores the data that is being dragged. You can specify data by "format" so that different targets can accept different types of data.When the
IDropTarget
dispatchesDragDropEvent.DRAG_ENTER
(theDragDropManager
handles the event dispatching, you just need to listen), and theDragData
object includes data of the correct format, it should callDragDropManager.acceptDrag()
.The
IDropTarget
will dispatchDragDropEvent.DRAG_DROP
if you drop the object (stop touching or release the mouse button) over theIDropTarget
. If it does, you need to handle the drop in the event listener.The
IDragSource
will dispatchDragDropEvent.DRAG_COMPLETE
whether the drop was accepted or not. TheisDropped
property of the event is aBoolean
that indicates if the drag was successfully dropped on a target that accepted it, of if it was cancelled. If the data that was dragged needs to be removed from the source after being dropped on the target, this event listener is the place to do it. Just check theisDropped
property to see if it was dropped or cancelled.
You can pass the "ghosted drag image" as the "avatar" when you call DragDropManager.startDrag()
. The avatar is what follows the mouse while you're dragging.
The format is what actually gets passed between the drag source and the drop target. This may be the same as the avatar, or it may be something more data-centric, like the data for a list item.
Usually, if you're simply dragging a display object around (that has no data associated with it like a list item would), you could add the display object itself as the drag data. Something like this is probably fine:
var dragData:DragData = new DragData();
dragData.setDataForFormat("display-object-drag-format", theDisplayObject);
In this case, I randomly called the format "display-object-drag-format"
, but call it whatever you want. It just needs to be a string that both sides (the drag source and the drop target) agree on.
Then in your DragDropEvent.DRAG_ENTER
listener, you can check for that format:
function(event:DragDropEvent, dragData:DragData):void
{
if(dragData.hasDataForFormat("display-object-drag-format"))
{
DragDropManager.acceptDrag(this);
}
}
In the DragDropEvent.DRAG_DROP
listener, you use dragData.getDataForFormat()
with the same string to retrieve the display object or other data.