PDA

View Full Version : [UNKNOWN][3.??] Dragging over windows and floating elements



nextdigital
30 Nov 2009, 7:17 PM
Ext.onReady(function(){
var drop = new Ext.Panel({
region: 'center'
});
drop.on('render',function(){
drop.dd = new Ext.dd.DropTarget(drop.getEl(),{
ddGroup: 'myGroup',
notifyDrop: function(source,e,data){
return true;
}
});
});
var view = new Ext.Viewport({
layout: 'fit',
items: [drop]
});

var panel = new Ext.Panel({
width: 80,
height: 80,
html: '<center>DRAG ME</center>'
});
panel.on('render',function(){
panel.dd = new Ext.dd.DragSource(panel.getEl(),{
ddGroup: 'myGroup'
});
});
var win = new Ext.Window({
title: 'Floating Window',
width: 400,
height: 350,
items: [panel]
});
win.show();
});

In the above example, you'll notice that if you drag the 'DRAG ME' panel over the floating window, the 'drop' panel will still accept the drop... I believe this to be unexpected behaviour for the user.

if this is not a bug, please provide an explanation as to why, or better yet a workaround that will make it perform as the user would expect.

Animal
1 Dec 2009, 12:09 AM
The problem is that the DDManager loops through all the DD instances that it manages checking whether the current mouse position is within the rectangle of that DD instance.

And it does not account for z-indexes of overlapping DDs where one may obscure the other. Events (dragenter, drag dragout) are delivered to all DD instances that the mouse is found to be over.

This has been discussed and a few workarounds thrown around

http://www.extjs.com/forum/showthread.php?t=58284
http://www.extjs.com/forum/showthread.php?t=50109

In the long term, I think the DD subsystem needs rewriting.

nextdigital
1 Dec 2009, 9:25 PM
agreed, Animal... afaik the DD core is left over from YUI

I have been unable to get the workarounds working in 3.x (although I didnt try very hard), if anyone else has please post your code :)