dojo.dnd.HtmlDragMoveSource and constrainTo seems to disregard x/y of constraining node

[guest]

It seems like the height and width of the constraining node are applied, but the x and y are not. That is, setting a constraint will constrain the drag to be in a bounding box the same shape as the constraining node, but the location of that bounding box will be at the top left of the offsetParent of the containing node (which may be different.)

I was able to fix this problem by changing the code like this:

--- src/dnd/HtmlDragAndDrop.js  (revision 7467)
+++ src/dnd/HtmlDragAndDrop.js  (working copy)
@@ -156,7 +156,6 @@
                        x: this.dragStartPosition.x - e.pageX};

                this.dragClone = this.createDragNode();
-
                this.containingBlockPosition = this.domNode.offsetParent ?
                        dojo.html.getAbsolutePosition(this.domNode.offsetParent,
 true) : {x:0, y:0};

@@ -194,10 +193,12 @@
                        height = content.height;
                        x =
                                this.containingBlockPosition.x +
+                               this.constrainingContainer.offsetLeft +
                                dojo.html.getPixelValue(this.constrainingContain
er, "padding-left", true) +
                                dojo.html.getBorderExtent(this.constrainingConta
iner, "left");
                        y =
                                this.containingBlockPosition.y +
+                               this.constrainingContainer.offsetTop +
                                dojo.html.getPixelValue(this.constrainingContain
er, "padding-top", true) +
                                dojo.html.getBorderExtent(this.constrainingConta
iner, "top");
                }

My code/HTML that CREATED the problem looks like this:

Javascript:

	var thumb = dojo.byId('pan_zoom_thumb');
	var dd = new dojo.dnd.HtmlDragMoveSource(thumb);
	var bg = dojo.byId('pan_zoom_thumb_bg');
	dd.constrainTo(bg);

HTML:

<div id="pan_zoom">
..
	<div id="pan_zoom_open">
...
		<div class="pan_zoom_bg" id="pan_zoom_thumb_bg">
...
			<img src="${IMAGE_SERVER}/images/3_0/zoom_bg.png" width="16" height="85" usemap="#zoom_ctrl_map"/>
			<div class="pan_zoom_thumb_img" id="pan_zoom_thumb">
				<img src="${IMAGE_SERVER}/images/3_0/zoom_thumb.png" width="16" height="8"/>
			</div>
		</div>

and the relevant CSS looks like this:

#pan_zoom {
	position: absolute;
	left: 860px;
	top: 10px;
	width: 57px;
	background-color: #fff;
	border:1px solid #aaa;
	filter: alpha(opacity=80);
	opacity: .80;
}


#pan_zoom_open {
	display: block
}

.pan_zoom_bg {
	text-align: center;
	cursor: pointer;
}

.pan_zoom_thumb_img {
	width: 57px;
	text-align: center;
	position: absolute;
	top: -5000px;
	cursor: pointer;
}

You can reach me at smedberg at gmail dot com if you'd like any details

[bill]

1. have you filed a cla (www.dojotoolkit.org/icla.txt)? you need to.
2. did you test your fix to see if it breaks anything in tests/dnd or tests/widget/test_FloatingPane.html (the pane inside a pane)?
3. please attach test cases to the bug instead of inlining them, including a full html file that reproduces the problem. (then you can erase the inlined text above)

[bill]

I'm not sure we want to support drag & drop within a container that isn't position:relative or position:absolute. Anyway, I corresponded w/the author over email. He said he could file a CLA if necessary but was just suggesting a fix; he hasn't tested floating pane, etc., so his changes might need some work anyway.

[Eugene Lazutkin]

Fixed in 0.9.