Conditional Drag & Drop

We had a small presentation lined up for some Flex users today at our office. I did a presentation on E4X, something I have been discussing a lot on this blog. Harish was taking a session on Drag & Drop and someone in the audience had a very interesting question.

He wanted conditional drag & drop. This meant that he wanted to decide on “dragEnter“, if the data was good enough to be accepted by the destination. I just put together an app which i wanted to share here.

Here, I have 2 DataGrids, one which is a Stock List and the other, a Buying List. You can drag and drop items from the Stock List to the Buying one, but subject to availability. What it does is that, on dragEnter, the following function is executed.

private function enterDrag(event:DragEvent):void{
var obj:Object = event.dragSource.dataForFormat(“items”);
if(!obj[0].available){
event.stopImmediatePropagation();
}
}

The function checks the availability of the item and if unavailable, calls the event.stopImmediatePropagation() method, which doesn’t allow the drop operation on the grid for that item.

You can view the application and the source here

Advertisements

5 Responses to Conditional Drag & Drop

  1. barry.b says:

    where (and how- best way) would you put a message to alert the user why the item couldn’t be dragged and dropped?

    straight after the stopImmediatePropagation();?
    ————————
    if(!obj[0].available){
    event.stopImmediatePropagation();
    Alert.show(“cannot add item – insufficient stock”);
    }

  2. raghunathrao says:

    @Barry – I wouldn’t put the Alert on dragEnter

    The way I would do is to set a flag in the dragEnter handler and on dragComplete on the dragInitiator, I would throw this Alert.

    If you put the Alert code on dragEnter, even as you enter the dataGrid, the Alert will be thrown, which i think is not the right kinda design, but the user should get the error once the drag drop fails (which is after the mouseUp on the destination)

  3. Tyler Breisch says:

    Thanks man this really helped me out. I couldn’t figure out why I could not access the event.draggedItem, but your way works perfect.

  4. How can I get the dragged item? In my case it will be a module and I need to invoke a pop up by calling a method in the module being drag and dropped. But for that I need to get the item droped just before as an object.

  5. zeeshan says:

    How can I constrain dragging of the item within bounds through DragManager?

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s