Flex Drag & Drop: Detect when all data has been moved from source to destination

Question

I have two controls mx:TileListthat I use to enable editing objects in batch mode. The first contains a set of all available data, and the second contains the current batch. Both are bound to ArrayCollectionsand, using the built-in drag-n-drop function for the TileList control, data moves from one ArrayCollectionto another when an object is dragged between them.

I need to change currentStateto show and reset the batch manipulation controls when the number of batches goes from 0 to n or n to 0 . Based on the documentation , I would have thought that I should listen to the event dragComplete, but my testing shows that instead of firing after the data was deleted from the original ArrayCollection array and added to the target ArrayCollection array, it runs (sequentially) between these two actions.

Both lists are similar to the following:

<mx:TileList 
    id="srcList" 
    dragEnabled="true" 
    dropEnabled="true" 
    dragMoveEnabled="true" 
    dataProvider="{images}"
    dragComplete="handleDragComplete(event)"
    allowMultipleSelection="true"
/>

And here is the source of the function handleDragComplete:

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 finally, here is an example of output from running code. They all start one after another.

Case 1:

10 , . 1 .

srcList.dragComplete: batch.length=1
srcList.dragComplete: images.length=10

(: 1,9)

, ArrayCollection, .

2:

2- .

srcList.dragComplete: batch.length=2
srcList.dragComplete: images.length=9

(: 2,8)

-, , image.length , , , , . dragComplete .

: ArrayCollection (batch.length = 2), dragComplete ( ), ArrayCollection.

3:

.

batchList.dragComplete: batch.length=2
batchList.dragComplete: images.length=10

(: 0,10)

, batch.length , 10.

: - ? , ? (. DragExit, DragDrop, , , , , .) ? ... SDK?

Answer 1

collectionChange ArrayCollections?

batch.addEventListener(CollectionEvent.COLLECTION_CHANGE, handleBatchCollectionChange);

Answer 2

, .

private function dragBeginHandler():void {
    stage.addEventListener(MouseEvent.MOUSE_UP, dragFinishHandler);
    trace("Drag/drop started, Drag-completion listener added");
}

private function dragFinishHandler():void {
    stage.removeEventListener(MouseEvent.MOUSE_UP, dragFinishHandler);
    trace("Drag/drop finished, Drag-completion listener removed");

    //do or print whatever you want to do here, add/remove will be done by now
    trace('dragComplete: batch.length=' + batch.length.toString());
    trace('dragComplete: images.length=' + images.length.toString());

    if (batch.length > 0){
            currentState = 'show';
    }else{
            currentState = '';
    }
}

<mx:TileList 
        id="srcList" 
        dragStart="dragBeginHandler()"
        dragEnabled="true" 
        dropEnabled="true" 
        dragMoveEnabled="true" 
        dataProvider="{images}"
        dragComplete="handleDragComplete(event)"
        allowMultipleSelection="true"
/>