如果在特定列上完成拖动，则启用行的拖放

Question

我通过将以下代码添加到配置参数来启用在我的网格上拖放一行：

viewConfig: {
        plugins: {
            ptype: 'gridviewdragdrop',
            dragGroup: 'firstGridDDGroup',
            dropGroup: 'firstGridDDGroup'
        }
    }

有效，无论如何，我希望用户通过拖动属于第一列的元素来进行拖动。

我的想法是添加一个"move"列，像这样：

move| name | surname | age |
<-> | alex | cross   | 24  |
<-> | jim  | reynor  | 35  |

如果我想移动第一行中的第二行 (jim)，我必须将鼠标放在“<->”符号上然后拖动，相反，如果我将鼠标放在“<->”符号上，例如， "surname" 应禁用列拖放。

这可能吗？

Answer 1

您可以将 tdCls 添加到要启用拖动的列，然后通过配置将 onBeforeDrag 侦听器挂接到 dragZone 上。然后你会测试事件目标父是否有你的 class 然后 return false 取消拖动或没有任何东西允许它继续。

例如：-

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'movecol'],
            data: [
                ["Lisa", "<-->"],
                ["Bart", "<-->"],
                ["Homer", "<-->"],
                ["Marge", "<-->"]
            ],
            proxy: {
                type: 'memory',
                reader: 'array'
            }
        });

        Ext.create('Ext.grid.Panel', {
            store: 'simpsonsStore',
            columns: [{
                header: 'Name',
                dataIndex: 'name',
                flex: true
            }, {
                header: 'Drag',
                dataIndex: 'movecol',
                flex: true,
                tdCls: 'myDraggable'
            }],
            viewConfig: {
                plugins: {
                    ptype: 'gridviewdragdrop',
                    dragText: 'Drag and drop to reorganize',
                    dragZone: {
                        onBeforeDrag: function(data, e) {
                            console.log(data, e);
                            draggedCell = Ext.get(e.target.parentNode);
                            if (draggedCell.hasCls('myDraggable')) {
                                console.log('yes i can be dragged');
                            } else {
                                console.log('no I cannot be dragged');
                                return false;
                            }
                        }
                    }
                }
            },
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
        });
    }
});

这里是工作演示https://fiddle.sencha.com/#fiddle/j0l

如果在特定列上完成拖动，则启用行的拖放

Enable drag and drop of a row just if dragging is done on a specific column

extjs

extjs4

extjs5