Drag and Drop停止爲一次拖動的項目工作

Question

我有一個ExtJS treepanel在容器A頁上，還有另一個容器B。

treepanel通過Ajax調用項目進行初始化。在treepanel的viewConfig中，我添加了itemadd事件偵聽器，其中我將添加的項目註冊爲DragSource。以下是中的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 
     }; 
    }); 
} 

而且在容器條b，我加入了一個名爲MyView查看延伸Ext.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. 
    }; 
} 

現在，這是一步一步使用中描述的問題。

• 我將第一次從treepanel項目拖到容器B中，它按預期工作正常。
  • 我不允許再添加重複的項目到MyView，我有一個刪除按鈕添加每個項目從MyView中刪除它。
• 我刪除了我添加的項目。
• 我嘗試再次從樹面板拖動它，但是它不再是可拖動的項目。
  • 儘管我仍然可以從同一個treepanel中拖動另一個項目並添加它，但不是我之前添加和刪除的第一個項目（並且對於我曾添加到MyView中的所有項目都會發生同樣的事情請注意，刪除項目不必重現該問題，只增加它會導致此。

那麼，什麼是越來越錯在這裏？

任何幫助將是巨大的。

Answer 1

我建議爲樹使用Ext.tree.plugin.TreeViewDragDropView（ptype: treeviewdragdrop）插件，而不是手動處理它。

實施例爲TreePanel中：

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; 
       } 
      });       
     } 
    } 
});