extjs - 如何将 Name1 拖动到 Name 6 面板

Question

如何从另一个面板拖动面板项目？

例如:我想将 Name1 拖到 Name 6 面板。当我尝试按 shift+m​​ousescrollkey 时，它会松开拖动项目。

提前致谢 :)

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

这是 ExtJS 版本中的一个错误 6.0.2 dragZone 上的滚动配置不起作用。 panel.scrollBy()也不行您可以通过它滚动该面板。

我认为您将不得不更新您的框架。

当您更新到 6.2.0.589 时scrollBy 函数将开始工作。您可以向每一列添加鼠标事件，当您超过该事件时，滚动主面板。

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

当您更新到 6.2.0.981 时 scroll dragZone 中的配置将开始工作。

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

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

但是现在，当您按住一个项目并滚动到该列并且它是之前不在 View 中的 dropZone 时，该列未注册为 dropZone 并且您无法删除该项目。事件notifyOver 不会被调用。

当我试验 http://examples.sencha.com/extjs/6.2.0/examples/classic/dd/dragdropzones.html 时，我得到了相同的结果

我认为这是另一个 ExtJS 错误。

一般来说，当您必须在使用拖放时滚动时，我认为这不是好的 UX 设计。