How to Drag Name1 To Name 6 panel

Question

How to drag a panel item from another panel?

For example: I want to drag Name1 To Name 6 panel. When I tried by pressing shift+mousescrollkey, then it loose dragging item.

Thanks 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'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'
                    }]
                }
            }]
        })
    }
});

Answer 1

It's a bug in ExtJS version 6.0.2 the scroll config on the dragZone doesn't work. Neither does panel.scrollBy() by which you can scroll that panel.

I think that you will have to update your framework.

When you update to 6.2.0.589 the scrollBy function will start working. You could add mouse event to each column and when you are over that, scroll the main panel.

containermouseover: function (me) {
    var panel = Ext.first('#myMainPanel');
    panel.scrollBy(me.getX() - panel.getWidth() / 4, 0, true);
},

When you update to 6.2.0.981 the scroll config in the dragZone will start working.

this.dragZone = new Ext.dd.DragZone(me.getEl(), {
    ...
    // this doesn't work in 6.0.2 but works in 6.2.0.981
     scroll: true
});

My fiddle https://fiddle.sencha.com/#view/editor&fiddle/1qse

But now when you hold an item and you scroll into the column and it's dropZone which was not in the view before, the column is not registered as a dropZone and you can't drop the item. The events notifyOver are not called.

And I am getting the same results when I experiment with http://examples.sencha.com/extjs/6.2.0/examples/classic/dd/dragdropzones.html

I assume that this is another ExtJS bug.

In general I don't think it's good UX design when you have to scroll while using drag and drop.