Opened 14 years ago

Closed 13 years ago

Last modified 13 years ago

#452 closed defect (fixed)

Drag and drop misaligned when embedded in scrolled div

Reported by: jonpierce.lists@… Owned by: bill
Priority: high Milestone:
Component: DnD Version: 0.2
Keywords: Cc:
Blocked By: Blocking:

Description

I'm trying to incorporate Dojo's drag and drop functionality into an existing application. But I've noticed that it's misaligned when embedded in a scrolled div (e.g., one with style="overflow: auto" and more content than can fit). I'm using Dojo 0.2.2 but I've verified that this is still a problem in the trunk.

I've copied some very rough sample code below that demonstrates the problem. The code basically just creates a tree of draggable/droppable nodes that expand when clicked. The tree is inserted into a fixed-size div with autoscrolling. To see the problem, load the page, click on a few nodes until you get the scrollbar to show up, then scroll down a bit and start dragging a node around. Notice that the alignment is off.

simple-tree.js


dojo.dnd.dragManager.nestedTargets = true;

Tree = function() {

var NODE_TAGNAME = "li"; var NODE_LABEL_TAGNAME = "span"; var NODE_BODY_TAGNAME = "ul"; var NODE_LABEL_CLASSNAME_SUFFIX = "Label"; var NODE_BODY_CLASSNAME_SUFFIX = "Body";

var ONCLICK = "onclick"; var HANDLER_SUFFIX = "Handler"; var ONCLICK_HANDLER = ONCLICK + HANDLER_SUFFIX;

var dragSources = []; var dropTargets = {};

this.setDragSources = function (pTypeArray) {

this.dragSources = pTypeArray;

};

this.setDropTargets = function (pTypeMap) {

this.dropTargets = pTypeMap;

};

this.populate = function (pPropertiesArray, pParent) {

for (var i = 0; i < pPropertiesArray.length; i++) {

this.assembleElement(pPropertiesArray[i], pParent);

}

}

this.assembleElement = function(pProperties, pParentNode) {

var type = pPropertiestype?; var element = document.createElement(NODE_TAGNAME); element.id = pPropertiesid?; element.className = type;

var label = document.createElement(NODE_LABEL_TAGNAME); label.className = type + NODE_LABEL_CLASSNAME_SUFFIX; label.innerHTML = pPropertieslabel?; element.appendChild(label);

var body = document.createElement(NODE_BODY_TAGNAME); body.className = type + NODE_BODY_CLASSNAME_SUFFIX; element.appendChild(body);

if (pParentNode) {

pParentNode.appendChild(element);

}

this.wireEvents(element);

if (dojo.lang.inArray(this.dragSources, type)) {

new dojo.dnd.HtmlDragSource?(element, type);

} if (this.dropTargets[type]) {

new dojo.dnd.HtmlDropTarget?(body, this.dropTargets[type]);

}

return element;

}

this.wireEvents = function(pElement) {

var tree = this; var propertiesArray = this.buildPropertiesArray(pElement); var body = dojo.dom.getFirstChildElement(pElement, NODE_BODY_TAGNAME); pElement[ONCLICK_HANDLER] = function (event) {

tree.populate(propertiesArray, body); event.stopPropagation(); };

dojo.event.connect(pElement, ONCLICK, pElement, ONCLICK_HANDLER);

}

this.buildPropertiesArray = function (pParent) {

var propertiesArray = []; for (var i = 0; i < 5; i++) {

var properties = new Object(); propertiesid? = pParent.id + "." + i; propertiestype? = this.lookupChildType(pParent); propertieslabel? = propertiestype? + propertiesid?; propertiesArray.push(properties);

} return propertiesArray;

}

this.lookupChildType = function (pParent) {

return pParent.className;

}

}

2) simple-tree-test.html


<html> <head>

<script src="dojo/dojo.js"></script> <script src='simple-tree.js'></script>

</head> <body> <div style="height: 250px; overflow: auto;"> <ul id="items"> </ul> </div> <script>

var tree = new Tree(); tree.setDragSources(Category?); tree.setDropTargets({ "Category" : Category? }); var properties = new Object(); propertiesid? = 1; propertiestype? = "Category"; propertieslabel? = propertiestype? + propertiesid?; tree.assembleElement(properties, document.getElementById("items"));

</script> </body> </html>

Change History (7)

comment:1 Changed 14 years ago by alex

Milestone: 0.2.2release0.3release

moving to correct milestone

comment:2 Changed 14 years ago by skinner

Milestone: 0.3release0.4

comment:3 Changed 13 years ago by dylan

Owner: changed from anonymous to alex

comment:4 Changed 13 years ago by dylan

Component: CoreDnD
Milestone: 0.40.5

sorry, going to have to punt this until 0.5.

comment:5 Changed 13 years ago by bill

Milestone: 0.50.4.1
Owner: changed from alex to bill
Status: newassigned

Hmm, it doesn't even work if the main window is scrolled. Just try http://archive.dojotoolkit.org/nightly/tests/widget/test_FloatingPane.html, make your browser window small, scroll down, and drag.

comment:6 Changed 13 years ago by bill

Resolution: fixed
Status: assignedclosed

(In [6324]) More DnD works; fixes #452 and test_dragmoveparent.html

comment:7 Changed 13 years ago by (none)

Milestone: 0.4.1

Milestone 0.4.1 deleted

Note: See TracTickets for help on using tickets.