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

Question

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

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

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

我的想法是添加一个“移动”列，像这样:

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

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

这可能吗？

Answer 1

您可以将 tdCls 添加到要启用拖动的列，然后将 onBeforeDrag 监听器挂接到 dragZone通过它的配置。然后您将测试事件目标父级是否有您的类，然后返回 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