Flex 拖拽删除：检测所有数据何时从源移动到目标

Question

我有两个 mx:TileList 控件，用于批量编辑对象。第一个包含所有可用数据的集合，第二个包含当前批次。两者都绑定到 ArrayCollections，并且使用 TileList 控件的本机拖放功能，当在一个 ArrayCollections 之间拖动对象时，数据会从一个 ArrayCollections 移动到另一个他们。

我需要更改 currentState 以显示 &当批次计数从 0 变为 n 或 n 变为 0 项时，重置批次操作控件。根据文档，我会我认为我应该监听 dragComplete 事件，但我的测试表明，它不是在数据从源 ArrayCollection 中删除并添加到目标 ArrayCollection 后触发，而是在这两个事件之间（一致）触发行动。

两个列表都与此类似：

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

这是 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 = '';
    }
}

最后，这是运行代码的一些示例输出。这些都是一个接一个地运行。

情况 1：

应用程序在第一个列表中加载 10 个对象，但批次为空。我将 1 个对象从源列表拖到批处理列表。

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

（预期：1,9）

显然，该对象已添加到批处理 ArrayCollection 中，但未从源中删除。

情况 2：

现在，我将第二个对象拖入批次中。

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

（预期：2,8）

首先，我们可以看到 images.length 发生了变化，这表明我从源列表拖动到批处理列表的对象在 DragComplete 事件触发后被删除。

这次发生了同样的事情：新对象被添加到批处理 ArrayCollection (batch.length=2)，dragComplete 事件触发（运行这些跟踪），然后该对象从源中删除数组集合。

情况 3：

现在，我将把批处理列表中的两个图像拖回到源列表中的原始位置。

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

（预期：0,10）

我们可以看到，batch.length 没有减少，但源图像数组又回到了原来的长度 10。

问题：我做错了什么吗？还有其他我可以收听的事件吗？ （注意：我尝试了 DragExit 和 DragDrop，只是为了确定，它们的行为如下预期的，但不是我需要的。）或者还有其他方法来获取我想要的数据吗？或者...我在 SDK 中发现了错误吗？

Answer 1

您可以监听目标 ArrayCollections 上的 collectionChange 事件吗？

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"
/>