PDA

View Full Version : Bug: Drag and Drop Events Stop Responding When DIV with Overflow:Auto Is Scrolled



sjanes71
2 Jul 2007, 11:27 AM
Hello Ext-ers and Jack!

I have an interesting problem that is driving me crazy! I have some Drag and Drop items inside of a Content panel wrapped in a Border layout inside of a Tab. Its set to a fixed height so there is some overflow.

When the panel is not scrolled in any way, the drag and drop events and handlers are triggered and work normally. When I scroll the DIV that has overflow down those events stop responding, until I scroll the DIV back to the top.

I believe I am registering the area with the ScrollManager before I start activating all of the DD elements inside of the area--but that overflow area is several elements above the actual elements being used and during the drag, the Scroll Manager doesn't do any scrolling with the DIV when I get near the edge. :(

I've tried a couple of different DOCTYPE's including Transitional and Strict, and nothing helped.

Here is a fragment of code I'm testing with (with some extra stuff for resetting the position of an element, I've been testing with DD and DDProxy, there's a mixture of JQuery in there so be ready):



var json_dd = {}; // Save these objects somewhere.

// Find the content panel with overflow auto and tell ScrollManager about it...
Ext.dd.ScrollManager.register(jQuery("#layout1_tv/../../..").attr('id'));

// Until I can get DragZone or DropZone to work, we're making lots of these.
jQuery("span.treeviewcontrol.insert").each(function() {
var dt = new Ext.dd.DDTarget(this.id, "json");
json_dd[this.id] = dt;
});
// Until I can get DragZone or DropZone to work, we're making lots of these.
jQuery("span.treeviewcontrol.append").each(function() {
var dt = new Ext.dd.DDTarget(this.id, "json");
json_dd[this.id] = dt;
});

jQuery("span.jsonmodel.draggable").each(function() {
// var dd = new Ext.dd.DD(this.id,"json",{scroll: true});
var dd = new Ext.dd.DDProxy(this.id,"json",{scroll: true});
dd.onInvalidDrop = function () {
// Put it back to its original location in the DOM tree.
jQuery("#"+this.getEl().id).css('top','0px').css('left','0px');
}
dd.onDragDrop = function() {
// Put it back to its original location in the DOM tree.
jQuery("#"+this.getEl().id).css('top','0px').css('left','0px');
}

json_dd[this.id] = dd;
});


Many thanks to anyone who has a pointer or hint!

Simon

wheezer
2 Jul 2007, 12:42 PM
Sjanes has decribed the same problem i am having, almost exactly. Eager to hear some response. I notice jack's tree demo does not have the problem, and cannot figure out why.

jack.slocum
2 Jul 2007, 2:05 PM
Are they part of the same DD Group?

sjanes71
2 Jul 2007, 5:07 PM
There is only one drag and drop group, "json" for just the kind of data I'm moving around.

wheezer
3 Jul 2007, 4:14 AM
"GroupFoo," of course :)

sjanes71
3 Jul 2007, 4:31 AM
Here is a self-contained page that demonstrates the issue. Drag on "Drag" and the DDProxy works as long as the DIV is not scrolled in any way.




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Drag and Drop Experiment</title>
<script language="JavaScript" src="ext-1.1-beta2/adapter/jquery/jquery.js"></script>
<script language="JavaScript" src="ext-1.1-beta2/adapter/prototype/prototype.js"></script>
<script language="JavaScript" src="ext-1.1-beta2/adapter/prototype/scriptaculous.js"></script>
<script language="JavaScript" src="ext-1.1-beta2/adapter/prototype/effects.js"></script>
<script language="JavaScript" src="ext-1.1-beta2/adapter/prototype/ext-prototype-adapter.js"></script>
<script language="JavaScript" src="ext-1.1-beta2/ext-all.js"></script>
</head>
<body>
<h1>Drag and Drop Experiment</h1>
<style>
.handle { font-weight: bold;}
</style>
<p>Drag and drop works for these items unless the overflow:auto DIV is
scrolled.</p>
<div id="overflowing" style=
"overflow: auto; height: 200px; width: 300px;">
<div>
<div id="innerdiv">
<div>
<span id="_1" class="target">Target</span>
<span id="_2" class="handle">Drag</span> Lorem
ipsum dolor sic sectipsum dolor sic sectipsum dolor sic sectipsum dolor sic sectipsum dolor sic sectipsum dolor sic sectipsum dolor sic sectipsum dolor sic sectipsum dolor sic sect...
</div>

<div>

<span id="_3" class="target">Target</span>
<span id="_4" class="handle">Drag</span> Lorem
ipsum dolor sic sectipsum dolor sic sectipsum dolor sic sectipsum dolor sic sectipsum dolor sic sectipsum dolor sic sectipsum dolor sic sectipsum dolor sic sectipsum dolor sic sect...
</div>
<div>

<span id="_4" class="target">Target</span>
<span id="_5" class="handle">Drag</span> Lorem
ipsum dolor sic sectipsum dolor sic sectipsum dolor sic sectipsum dolor sic sectipsum dolor sic sectipsum dolor sic sectipsum dolor sic sectipsum dolor sic sectipsum dolor sic sect...
</div>
</div>
</div>
</div>

<script>
Ext.onReady(function(){
var json_dd = {}; // Save these objects somewhere.

// Find the content panel with overflow auto and tell ScrollManager about it...
Ext.dd.ScrollManager.register(jQuery("#innerdiv/../../..").attr('id'));

// Until I can get DragZone or DropZone to work, we're making lots of these.
jQuery("span.target").each(function() {
var dt = new Ext.dd.DDTarget(this.id, "json");
json_dd[this.id] = dt;
});

jQuery("span.handle").each(function() {
// var dd = new Ext.dd.DD(this.id,"json",{scroll: true});
var dd = new Ext.dd.DDProxy(this.id,"json",{scroll: true});
dd.onInvalidDrop = function () {
// Put it back to its original location in the DOM tree.
jQuery("#"+this.getEl().id).css('top','0px').css('left','0px');
}
dd.onDragDrop = function() {
// Put it back to its original location in the DOM tree.
jQuery("#"+this.getEl().id).css('top','0px').css('left','0px');
}

json_dd[this.id] = dd;
});
})
</script>
</body>
</html>

sjanes71
3 Jul 2007, 5:19 AM
Sjanes has decribed the same problem i am having, almost exactly. Eager to hear some response. I notice jack's tree demo does not have the problem, and cannot figure out why.

I've gone through every demo code I could find for DD and all the class documentation for DD-- Jack's tree is the only place I've seen it not break but I can't figure out what's different about his treepane vs. just an ordinary DIV with overflow.

wheezer
3 Jul 2007, 7:02 AM
Simon. I don't think the DD group affects it because I'm only using one group too. I think only jack can solve this riddle. From what I can see from other posts on the web, he's the only one that has ever solved it. I am stuck in the mud, and I MUST get this working, as our application depends on a smooth scroll of big trees and I too committed to to these superb Ext tools. Typically, it's always the one you need the most, that proves the biggest challenge. Arggggggggh.

I would paste my sample, but yours is mostly the same as mine. I've tried yours too. If jack and make any work, I am sure all will.

(Waiting for Jack to parachute in and save the village :)

sjanes71
3 Jul 2007, 12:14 PM
TreePane uses an extended DragZone--is this possibly why the ScrollManager works and drag and drop inside the overflow area works?

sjanes71
3 Jul 2007, 12:20 PM
This appears to work--saw a mention in:

http://extjs.com/forum/showthread.php?t=8599

wheezer
3 Jul 2007, 4:35 PM
Great news. Tested x-browser?