I present to you the Drag'n'Drop MixinI've managed to embed an instance of my Drag'n'Drop showcase app here
So how does it work?You simply include
<dnd:DnDMixin />as a child of any container type and this enables that container as a drop target and any child as a drag source. It's as simple as that.
That's how you use it... How does it work?Ok, here's an excerpt from the project's
These mixins are designed to be used in MXML, leveraging components' event-driven life-cylce. They should be used as 'drop-ins', similar to usage model for inline item-renderers.In addition to this, I exploit the
Container.rawChildrenproperty, due to the fact that this mixin is a content-less UI component and should not interfere with content-full UI components. When an application is loaded all declared UI components are processed through an event-driven life-cycle. The life-cycle events the dnd-mixin is interested in are:
- Registration happens in the constructor, the earliest possible opportunity at the object level. More significantly, registration occurs before this (typically, one time) event is dispatched.
The handler for this event deregisters from this same event, removes the dnd-mixin from the container and then adds it back but to the
rawChildren. The handler then registers interest in the
DragEvent.DRAG_DROPevents. The corresponding handlers implement the necessary mechanics to provide drag'n'drop functionality; I refer you to the source code as it's pretty straight forward and not that interesting, especially if you've implemented D'n'D yourself before. The handler also registers interest in the following events:
- Through this event the dnd-mixin is notified whenever a component is added to the parent container. The addition of a child as far as the dnd-mixin is concerned, indicates a successful drag'n'drop operation to this parent container. Thus this event signals this dnd-mixin instance to take control of the D'n'D processing for this child component (to which a reference can be obtained from the event object). This handler registers interest in the following events on each managed child component:
- The registered handler simply detects the drag gesture (initiation) and delegates the operation to the
- The registered handler basically just adds the dragged component to the new container, which implicitly removes it from its current/previous parent. Doing so dispatches the
ChildExistenceChangedEvents, as explained here.
- Similar to
CHILD_REMOVEevent notifies the dnd-mixin whenever a component is removed from the parent container. The removal of a child likewise indicates a successful drag'n'drop operation away from this parent container. Hence this event signals this dnd-mixin instance to relinquish control for D'n'D processing. This is explicit and is implemented through deregistering interest in the