Results 1 to 4 of 4

Thread: Drag & Drop: Do not drag records to a specific zone inside the gride

  1. #1
    Sencha User kedavra's Avatar
    Join Date
    May 2012
    Posts
    19
    Answers
    2

    Default Answered: Drag & Drop: Do not drag records to a specific zone inside the gride

    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?

  2. 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:
    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;
        },
      }

  3. #2
    Sencha User kedavra's Avatar
    Join Date
    May 2012
    Posts
    19
    Answers
    2

    Default

    Up!

  4. #3
    Sencha User kedavra's Avatar
    Join Date
    May 2012
    Posts
    19
    Answers
    2

    Default Solution.

    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:
    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;
        },
      }

  5. #4
    Sencha User kedavra's Avatar
    Join Date
    May 2012
    Posts
    19
    Answers
    2

    Default Better solution

    A better way to make a non-droppable area with disabling green indicator:

    Code:
      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;
        }
      },

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •