Dragging and Dropping between lists Part 2: Events

In my previous article of this series I wrote about the properties that you have to set when you want to drag and drop between two lists. There were 3 properties, dragEnabled which allows you to copy items from this list to another, dragMoveEnabled which allows you to move items from this list to another, and dropEnabled which allow you to add items to the list via drag and drop.

However, there is more to it than just the properties. At any stage of Drag and drop, the Flex framework fires various instances of the DragEvent class. You can run code when these events occur, to provide visual cues to the user or even stopping prevent the drop process from occuring. The properties associated with a DragEvent confused me a bit when I Was first learning, so for clarification here they are:

• action: This is the action caused by the event, either DragMAnager.cOPY, DragManager.LINK, DragManager.MOVE, or DragMAnager.NONE.
• bubbles: I wrote another post about event basics, including bubbling Drag events do not bubble by default.
• cancelable: Drag events cannot be cancelled.
• currentTarget: The currentTarget is the item that has the listener registered.
• dragInitiator: This is the component that initiated the drag. It is the source list.
• dragSource: This is the data that is being dragged. It is a single element in the dataProvider of the Initiator list
• target: This is the item that we just dragged or dropped our source into (or over or out of depending upon the event type).

The different type of events are these:

• Drag Complete: This is dispatched by the initiator List. It is dispatched when the item is dropped onto some other list, or let go w/o ever being dropped (Such as back on the current list)
• Drag Drop: This is dispatched by the target when a item is dropped onto it. In the past I've used this event to verify that the dropped item is of the appropriate class.
• Drag Enter: When you are dragging something, and you drag the item over a component, that component fires this event to let us know that "someone dragged something over me." This can be used to change the appearance of the dragged item. With lists, a "+" is used to show that you can copy, or an "X" to show that you cannot drop here.
• Drag Exit: When you drag an item out a component, the DragExit event is fired. It is intended to be used to change the appearance of the item being dragged. This will remove the "+" or "X" added by the DragEnter event.
• Drag Over: This is used to provide visual feedback to the user when they drag an item over a list. With lists in particular, that feedback is often a highlighted line above or below the list element you are dragging over, showing you the location of where your item will be dropped.

It is worth noting that the drag and drop events are defined in the UIComponent, while the properties that I discussed in the previous article were specific to lists, and defined in ListBase, a class from which List is extended from. The ListBase also defines defaulted handlers for each of these methods. They are protected, so you could override them if you need special functionality. In the next article of this series I'll actually show some code and get this working.

BTW: Happy April Fools Day, ColdFusion is dead, Adobe is abandoning all open source initiatives, we're going to have Flash on the iPhone, yada, yada, yada. whatever.