CODEWITHSUNDEEP
extjsextjs4extjs5
Phate
Phate

Reputation: 6602

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

I enabled drag and drop of a row on my grid by adding the following code to configuration parameters:

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

It works, anyway I'd like for the dragging to happen just if the user does it by dragging an element belonging to the first column.

My idea is to add a "move" column, like this:

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

If I want to move second row (jim) in the first row I have to position my mouse on the '<->' symbol and then drag, on the contrary if I position my mouse on the, say, "surname" column drag and drop should be disabled.

Is this possible?

Upvotes: 3

Views: 3888

Answers (1)

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

You can add a tdCls to your column that you want to enable the drag on and then hook in the onBeforeDrag listener onto the dragZone via a config for it. Then you would test if the event targets parent has your class and then either return false to cancel the drag or nothing to allow it to continue.

E.g :-

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

Working demo here https://fiddle.sencha.com/#fiddle/j0l

Upvotes: 7

Related Questions