[OPEN] EXTJSIII-30 notifyDrop called in wrong ddGroup and/or multiple times

[chris-mac]

Drop zones which are members of different ddGroup(s) are notified, when drag source is dropped on a drop target overlaying another drop target.

Also notifyDrop event is called multiple times.

How to reproduce:

// reference local blank image
Ext.BLANK_IMAGE_URL = '/extjs/lib/resources/images/default/s.gif';
 
// create namespace
Ext.namespace('Test');
 
// create application
Test.app = function() {
  // do NOT access DOM from here; elements don't exist yet
 
  // private variables

  var tree = new Ext.tree.TreePanel({
    title: 'Tree',
    animate:true,
    height: 300,
    rootVisible: false,
    enableDrag: true,
    ddGroup: 'dropGroup1',
    selModel: new Ext.tree.MultiSelectionModel(),
    loader: new Ext.tree.TreeLoader({
      url: '/tree/nodes'
    })
  });

  // set the root node
  var treeRoot = new Ext.tree.AsyncTreeNode({
    draggable: false,
    id: 'items'
  });

  tree.setRootNode(treeRoot);
  
  var dropTarget1 = {
    height: 300,
    bodyStyle: 'padding: 30px; font-size: 16px; color: #00AE00;',
    html: 'Drop target 1',
    listeners: {
      render: function(panel){
        
        var dropTarget = new Ext.dd.DropTarget(panel.body,{
          ddGroup: 'dropGroup1',
          copy: false,
          overClass: 'over',
          notifyDrop: function(dragSource, event, data){
            console.info('notifyDrop dropTarget1');
            panel.body.highlight("00AE00");
          }
        });
      }
    }
  }
  
  var dropTarget2 = {
    border: false,
    bodyStyle: 'padding: 20px; font-size: 16px; color: #ff0000;',
    html: 'Drop target 2',
    listeners: {
      render: function(panel){
        
        var dropTarget = new Ext.dd.DropTarget(panel.body,{
          ddGroup: 'dropGroup2',
          copy: false,
          overClass: 'over',
          notifyDrop: function(dragSource, event, data){
            console.info('notifyDrop dropTarget2');
            panel.body.highlight("#ff0000");
          }
        });
      }
    }
  };
  
  var dropTarget3 = {
    border: false,
    bodyStyle: 'padding: 20px; font-size: 16px; color: #A020F0;',
    html: 'Drop target 3',
    listeners: {
      render: function(panel){
        
        var dropTarget = new Ext.dd.DropTarget(panel.body,{
          ddGroup: 'dropGroup3',
          copy: false,
          overClass: 'over',
          notifyDrop: function(dragSource, event, data){
            console.info('notifyDrop dropTarget3');
            panel.body.highlight("#A020F0");
          }
        });
      }
    }
  };
  
  // private functions

  // public space
  return {
    // public properties, e.g. strings to translate
    
    // public methods
    init: function() {
    
      var wrapper = new Ext.Panel({
        renderTo: 'ext-panel',
        border: false,
        width: 500,
        height: 300,
        layout: 'column',
        defaults: { border: false },
        items: [
          {
            columnWidth: .7,
            items: dropTarget1
          },{
            columnWidth: .3,
            items: tree
          }
        ]
      });
      
      var win1 = new Ext.Window({
        x: 80,
        y: 130,
        width: 150,
        height: 150,
        closable: false,
        resizable: false,
        title: 'Window 1',
        layout: 'fit',
        items: dropTarget2
      }).show();
      
      var win2 = new Ext.Window({
        x: 130,
        y: 200,
        width: 150,
        height: 150,
        closable: false,
        resizable: false,
        title: 'Window 2',
        layout: 'fit',
        items: dropTarget3
      }).show();
      
      tree.dragZone.addToGroup('dropGroup2');
      tree.dragZone.addToGroup('dropGroup3');
    
    } // end of init
  };
}(); // end of app
 
Ext.onReady(Test.app.init, Test.app);

Please see forum post http://www.extjs.com/forum/showthread.php?t=79806 for more details.

and working example http://extjs.wima.co.uk/example/18b

Regards,
Chris

[hhangus]

I can confirm this is still a problem in Ext v3.0.3 and it's quite a nuissance. I worked around it by ignoring odd numbered calls in notifyDrop. It would really be nice if it could be fixed in Ext though!!

[fineo_sencha]

I solved the problem of mutliple firing by a global time variable and only allow one drop event 100 ms after the last one. Works fine for me.

[adriankb]

This is still a problem in Ext 4.0.2a.

At first I thought maybe the notifyDrop methods needed to return true or false correctly, but even with these present it occurs.

Quick fix:

Declare dropTargetLastTime outside of the notifyDrop method.

var currentTime = new Date().getTime();                    if (currentTime < dropTargetLastTime + 200)
                    {
                        return false;
                    }
                    else
                    {
                        dropTargetLastTime = currentTime;
                    }

[sean.parmelee]

I ran into this issue in 4.0.7 and 4.1.0 RC2. I have a treepanel with a DropTarget and I'm opening an Ext.Window (which also has a DropTarget of the same group) on top of that treepanel. When I would drag items into the window, the treepanel would also interact with them. The solution I used was to grab a reference to the treepanel's DragDrop object (via DragDropManager.getDDById()) and called lock(). This prevents it from receiving DnD events. When I'm done with the window, I call unlock(). Looking at the ExtJS3 DragDropManager code, it looks like this solution should work there as well. Hope this helps!