Drag and Drop stops working for an item which is once dragged - extjs

Question

I have an ExtJS treepanel in Container A on page and there's another Container B.
The treepanel is initialized with items via Ajax call. In the viewConfig of treepanel, I've added itemadd event listener, in which I register added items as DragSource. Following is the itemadd event listener within viewConfig of treepanel.
'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
};
});
}
And in the items of Container B, I have added a View named MyView which extends Ext.container.Container internally. So in the afterrender of Container B, I'm registering itself as a DropTarget. Here's how I do that;
'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.
};
}
Now the here's problem described in step-by-step usage.
I drag an item from treepanel into Container B for first time and it works fine as intended.
I don't allow to add duplicate items again into MyView, I have a Remove button for each item added to remove it from MyView.
I remove the item which I added.
I try to drag it again from treepanel but it is no longer a draggable item.
Though I can still drag another item from same treepanel and add it, but not the first one which I added and removed earlier (and same thing would happen for all items which I once add to MyView. Note that removing of item is not necessary to reproduce the issue, only adding it causes this.
So what is getting wrong here?
Any help would be great.

Answer 1

I suggest to use the Ext.tree.plugin.TreeViewDragDropView (ptype: treeviewdragdrop) plugin for the tree instead of handling it manually.
Example for the treepanel:
var treePanel = Ext.create('Ext.tree.Panel', {
(...),
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
ddGroup: "sameGroup",
enableDrop: false
}
}
});
For the panel:
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;
}
});
}
}
});