How to drag a panel item from another panel?
For example: I want to drag the Name1 To Name 6 panel. When I tried, by pressing shift + mousescrollkey, it lost the drag and drop item.
Thank you in advance:)
Fiddle: https://fiddle.sencha.com/#fiddle/1hgf&view/editor
Ext.application({ name: 'Fiddle', launch: function() { Ext.define('myColumn', { extend: 'Ext.view.View', xtype: 'mycolumn', padding: 5, margin: 5, style: 'background-color: #f2f2f2;', itemSelector: 'div.nameselector', tpl: ['<tpl for=".">', '<div class="nameselector<tpl if="isTemp"> temp</tpl>">', '{name}', '</div>', '</tpl>'], listeners: { render: function(me) { var tempRec = null; // Create drag zone this.dragZone = new Ext.dd.DragZone(me.getEl(), { // On receipt of a mousedown event, see if it is within a DataView node. // Return a drag data object if so. getDragData: function(e) { // Use the DataView own itemSelector (a mandatory property) to // test if the mousedown is within one of the DataView nodes. var sourceEl = e.getTarget(me.itemSelector, 10); // If the mousedown is within a DataView node, clone the node to produce // a ddel element for use by the drag proxy. Also add application data // to the returned data object. if (sourceEl) { d = sourceEl.cloneNode(true); d.id = Ext.id(); return { ddel: d, sourceEl: sourceEl, sourceZone: me, sourceStore: me.store, repairXY: Ext.fly(sourceEl).getXY(), draggedRecord: me.getRecord(sourceEl) } } }, getRepairXY: function() { return this.dragData.repairXY; } }); this.dropZone = new Ext.dd.DropZone(me.getEl(), { // Helper method to return correct class string if drop // is permitted or not. getAllowed: function(allowed) { var proto = Ext.dd.DropZone.prototype; return allowed ? proto.dropAllowed : proto.dropNotAllowed; }, notifyOver: function(source) { return this.getAllowed(source !== me.dragZone); }, // Called when dragged element is over a drop zone. // If allowed, make a copy of the dragged record to // display in the zone (temporarily) by adding the record // to the column store. notifyEnter: function(source, e, data) { var allowed = source !== me.dragZone; if (allowed) { tempRec = data.draggedRecord.clone(); // Set record field 'isTemp' to true which will cause the dataview // template to use the 'temp' style defined in app.css tempRec.set('isTemp', true); me.getStore().add(tempRec); } return this.getAllowed(allowed); }, // Called when the dragged element leaves a container. Remove // the temporary record from the column store, removing the placeholder. notifyOut: function(source, e, data) { if (tempRec) { me.getStore().remove(tempRec); } }, // When a dragged source is over a container, // set the appropriate drop style for the dragged element. onContainerOver: function(source, e, data) { return this.getAllowed(source === me.dragZone); }, // When the element is dropped on a column, check to see // if we are dropping on the same column or not. If not, // then remove record from source column, add record to // drop column. onContainerDrop: function(source, e, data) { var overSame = source == me.dragZone, dragData = source.dragData; if (overSame) { // Do not allow drop over same zone // Return false to do a repair. return false; } var rec = dragData.draggedRecord; dragData.sourceStore.remove(rec); me.getStore().add(rec); // Clear temporary record tempRec = null; return true; } }); } } }); Ext.create('Ext.panel.Panel', { renderTo: Ext.getBody(), plugins: 'viewport', scrollable: 'horizontal', layout: { type: 'hbox', align: 'stretch' }, defaults: { 'width': 300 }, items: [{ xtype: 'mycolumn', store: { fields: ['name'], data: [{ name: 'Name 1' }] } }, { xtype: 'mycolumn', store: { fields: ['name'], data: [{ name: 'Name 2' }] } }, { xtype: 'mycolumn', store: { fields: ['name'], data: [{ name: 'Name 3' }] } }, { xtype: 'mycolumn', store: { fields: ['name'], data: [{ name: 'Name 4' }] } }, { xtype: 'mycolumn', store: { fields: ['name'], data: [{ name: 'Name 5' }] } }, { xtype: 'mycolumn', store: { fields: ['name'], data: [{ name: 'Name 6' }] } }] }) } });