拖放停止对曾经被拖动的项目工作答案

【问题标题】：Drag and Drop stops working for an item which is once dragged拖放停止对曾经被拖动的项目工作
【发布时间】：2013-10-17 10:47:40
【问题描述】：

我在页面上的 Container A 中有一个 ExtJS 树面板，还有另一个 Container B。

通过 Ajax 调用使用项目初始化树形面板。在treepanel 的viewConfig 中，我添加了itemadd 事件监听器，在其中我将添加的项目注册为DragSource。以下是treepanel的viewConfig中的itemadd事件监听器。

'itemadd': function(records, node){
    // Iterate over each child record of parent node in treepanel.
    Ext.each(records, function(record){
        var dragSource,
            field,
            fieldId;
        field = Ext.query('[id='+record.data.listId+']')[0]; // I've manually added 'listId' which has unique value gained from Ext.id() for each record item.
        fieldId = field.id;
        dragSource = new Ext.dd.DragSource(field, {
            isTarget  : false
        });

        dragSource.dragData = {
            record: record
        };
    });
}

在 Container B 的项目中，我添加了一个名为 MyView 的视图，它在内部扩展了 Ext.container.Container。所以在 Container B 的afterrender 中，我将自己注册为DropTarget。我是这样做的；

'afterrender': function(containerMain) {
    var dropZone,
        myView = Ext.ComponentQuery.query("myview")[0];

    dropZone = new Ext.dd.DropTarget(containerMain.getEl()); // Register Container B as DropTarget.

    dropZone.notifyDrop = function(source, event, params) {
        myView.doSomething(params.record); // This method will handle data of dropped record and internally show something on UI.
    };
}

现在是逐步使用中描述的问题。

我第一次将一个项目从树形面板拖到容器 B 中，它可以正常工作。
- 我不允许将重复的项目再次添加到 MyView，我为每个添加的项目都有一个删除按钮，以便将其从 MyView 中删除。
我删除了我添加的项目。
我尝试再次从树形面板拖动它，但 它不再是可拖动的项目。
- 虽然我仍然可以从同一个树形面板中拖动另一个项目并添加它，但不是我之前添加和删除的第一个项目（我曾经添加到 MyView 的所有项目都会发生同样的事情。请注意，删除item 不是重现问题所必需的，仅添加它会导致此问题。

那么这里出了什么问题？

任何帮助都会很棒。

【问题讨论】：

标签： extjs drag-and-drop extjs4 panel treepanel

【解决方案1】：

我建议对树使用Ext.tree.plugin.TreeViewDragDropView (ptype: treeviewdragdrop) 插件，而不是手动处理它。

树形面板示例：

var treePanel = Ext.create('Ext.tree.Panel', {   
    (...),
    viewConfig: {
        plugins: {
            ptype: 'treeviewdragdrop',
            ddGroup: "sameGroup",
            enableDrop: false
        }
    }
});

对于面板：

var panel = Ext.create('Ext.panel.Panel', {
    (...),
    listeners: {
        'afterrender': function(component) {
            var dropZone = Ext.create('Ext.dd.DropTarget', component.body.dom, {
                ddGroup: 'sameGroup',
                notifyDrop: function(source, event, params) {
                    var myView = panel.up('myview');
                    myView.doSomething(source, event, params);
                    return true;
                }
            });                         
        }
    }
});

【讨论】：