只要在特定列上进行拖动,就可以拖放行

Question

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

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

它是有效的,无论如何我想拖动发生只是用户通过拖动属于第一列的元素来实现它.

我的想法是添加一个"移动"列,如下所示:

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

如果我想要在第一行中移动第二行(jim),我必须将鼠标放在"< - >"符号上,然后拖动,相反如果我将鼠标放在"surname"列上,请执行和丢弃应该被禁用.

这可能吗？

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