PDA

View Full Version : Drag & Drop: Do not drag records to a specific zone inside the gride



kedavra
15 Jun 2012, 9:39 AM
Hello,

I'm trying implement D&D functionality with the plugin "gridviewdragdrop" for reordering records inside the grid. But I have a problem: there are two types of records - draggable and non-draggable. I can filter selection by a specific record's value, so I cannot drag them. I was looking for examples, that limit DropZone - non of them worked for ExtJS 4. How can I limit DropZone, so a user could not drop draggable records there?

For example, I have a grid with 10 records:
Non-Draggable1
Draggable1
Draggable2
Draggable3
Draggable4
Draggable5
Non-Draggable2
Non-Draggable3
Non-Draggable4
Non-Draggable5

I do not want Draggable1-5 records to be permitted for drop between Non-Draggable1-5. Can someone give me a tip?

kedavra
18 Jun 2012, 1:22 AM
Up!

kedavra
11 Apr 2013, 7:57 AM
I made 'Non-Draggable' lines non-droppable, instead of non-draggable.

I used listener 'beforedrop' and returned 'false', when I did not want a row to be dropped. Each line, like 'Non-Draggable' had CSS class 'cannot-drop-here' applied.
The code:

listeners: {
beforedrop: function(node, data, overModel, dropPosition, dropFunction) {
var sm = this.getSelectionModel();
var element = Ext.get(node);

if (element.hasCls('cannot-drop-here'))
return false;

return true;
},
}

kedavra
31 Oct 2013, 1:42 AM
A better way to make a non-droppable area with disabling green indicator:


afterRender: function(view) {
this.callParent([arguments]);

var plugin = this.getView().getPlugin('dd_grid_plugin' ); // 'dd_grid_plugin' - id of plugin;
plugin.dropZone.onNodeOver = function (node, dragZone, e, data) {
var me = this;

var element = Ext.fly(node);
if ( !element || (element && element.hasCls('cannot-drop-here')) ) {
me.invalidateDrop();
return me.dropNotAllowed;
} else if (me.valid) {
me.getIndicator().show();
};

if (!Ext.Array.contains(data.records, me.view.getRecord(node))) {
me.positionIndicator(node, data, e);
};

return me.valid ? me.dropAllowed : me.dropNotAllowed;
}
},