Flex Drag & Drop: Detecting when all data has been moved from source to destination
- by Adam Tuttle
I have two mx:TileList controls that I'm using to allow editing of objects in batch. The first contains a collection of all available data, and the 2nd contains the current batch. Both are bound to ArrayCollections, and using the native drag-n-drop functionality of the TileList control the data is moved from one ArrayCollection to the other when an object is dragged between them.
I need to change the currentState to show & reset the batch manipulation controls when the batch count goes from 0 to n or n to 0 items. Based on the documentation, I would have thought that I should listen to the dragComplete event, but my testing shows that instead of firing after the data has been removed from the source ArrayCollection and added to the destination ArrayCollection, it fires (consistently) between these two actions.
Both lists are similar to this:
<mx:TileList
id="srcList"
dragEnabled="true"
dropEnabled="true"
dragMoveEnabled="true"
dataProvider="{images}"
dragComplete="handleDragComplete(event)"
allowMultipleSelection="true"
/>
And here's the source of the handleDragComplete function:
private function handleDragComplete(e:DragEvent):void{
trace(e.dragInitiator.name + '.dragComplete: batch.length=' + batch.length.toString());
trace(e.dragInitiator.name + '.dragComplete: images.length=' + images.length.toString());
if (batch.length > 0){
currentState = 'show';
}else{
currentState = '';
}
}
And lastly, here's some example output from running the code. These are all run one after the other.
Case 1:
The application loads with 10 objects in the first list and the batch is empty. I dragged 1 object from the source list to the batch list.
srcList.dragComplete: batch.length=1
srcList.dragComplete: images.length=10
(Expected: 1,9)
Clearly, the object has been added to the batch ArrayCollection but not removed from the source.
Case 2:
Now, I'll drag a 2nd object into the batch.
srcList.dragComplete: batch.length=2
srcList.dragComplete: images.length=9
(Expected: 2,8)
Firstly, we can see that images.length has changed, showing that the object that I dragged from the source list to the batch list was removed AFTER the dragComplete event fired.
The same thing happens this time: The new object is added to the batch ArrayCollection (batch.length=2), the dragComplete event fires (running these traces), and then the object is removed from the source ArrayCollection.
Case 3:
Now, I'll drag both images from the batch list back to their original location in the source list.
batchList.dragComplete: batch.length=2
batchList.dragComplete: images.length=10
(Expected: 0,10)
We can see that batch.length hasn't gone down, but the source images array is back at its original length of 10.
QUESTION: Am I doing something wrong? Is there another event I could listen for? (Note: I tried both DragExit and DragDrop, just to be sure, and those behave as expected, but are not what I need.) Or is there another way to get the data that I want? Or... have I found a bug in the SDK?
