如何将Name1拖到名称6面板

Question

如何从其他面板拖动面板项？

例如：我想将Name1拖到名称6面板。当我尝试按shift + mousescrollkey时，它会松动拖动项目。

提前致谢：）

小提琴：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's own itemSelector (a mandatory property) to
                            // test if the mousedown is within one of the DataView's 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'
                    }]
                }
            }]
        })
    }
});