Cancelling a drag action in List components

Again, I’ve seen the question asked on several occasions regarding how to cancel a drag of an item between List components. The List components all have the drag events: dragEnter, dragExit, dragOver, dragComplete, and dragDrop. Each of these can be overridden with a custom event handler. If you call event.preventDefault() in your custom event handler, you will cancel the default behavior of this event in the List classes. For example, in the sample below, I call event.preventDefault() within the custom dragDrop handler of the destination List. This causes the item to not get added to the destination List and the item is not removed from the initiating List. When you are deciding which events to customize to achieve the drag and drop action you want, you can use this as a general summary of what each event does:

dragStart: This event is triggered on the initiating List. A dragSource is created and the drag begins by calling doDrag on the DragManager.dragEnter: This event is triggered on the target destination List. In the event handler, a drag is accepted or rejected. Drop feedback is shown depending on if this is a copy or move.dragExit: This event is triggered on the target destination List if the item leaves the List without dropping an item. The event handler hides the feedback icon.

dragDrop: This event is triggered on the target destination List when an item is dropped over the List. This event adds the item to the list and hides the feedback icon.

dragComplete: This event is triggered on the initiating List. The event handler removes the item from the list if the drag was a move.

In the sample that I’m providing, I have two Lists. The first List includes the name of a guest and a number of people attending in their group. You should be able to drag items from the first List to the second List until the total number of people “attending” in the second list is greater than 5. In the code, I am increasing the value of a global variable “totalGuests” whenever an item is added to the second list. In the custom dragDrop handler for this second List, the value of totalGuests is checked. If this value is greater than 5, then, the drag is cancelled.

Demo: dragExample.swf

Sample code: dragExample.mxml

4 responses

  1. Oh Lord, you saved my life, thank you so much.

    I was having trouble with “event.preventDefault()”, because the dragged item wasn’t inserted in the wrong drop list, but he was still removed from de drag list.

    The solution is in your example, I had to add “DragManager.showFeedback(DragManager.NONE);” after “event.preventDefault()” for the item not to be removed from the drag list.

    I still have not figured out what does “”, as the commenting of the line don’t change anything to the execution.

    Many thanks from a desperate developer who found many more resource on how enable Drag&Drop rather than cancelling it.


  2. Hi,

    I have a tilelist.

    I want to do reordering in it. If I use the normal method of setting dragEnabled etc to true, the reordering works.

    Now since it is only reorder, the copy event should be canceled. I managed to do it using dragDrop event.

    I also managed to stop other lists dropping items into this tilelist.

    The only thing I was unable to manage is stop an element being dragged outside this tilelist.

    Please help!


  3. One more thing,

    When the items are reordered, I want to know which item was moved from which position to which final position.

    How do I do this?


  4. Thanks a Lot for Sharing This , VERY HELPFULL .

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: