Opened 13 years ago

Closed 12 years ago

#2149 closed defect (fixed)

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

Reported by: guest Owned by: psowden
Priority: high Milestone: 0.9
Component: DnD Version: 0.4.1
Keywords: Cc:
Blocked By: Blocking:

Description

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

Change History (4)

comment:1 Changed 13 years ago by 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)

comment:2 Changed 13 years ago by 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.

comment:3 Changed 13 years ago by dylan

Component: GeneralDnD
Milestone: 0.5
Owner: changed from anonymous to psowden

comment:4 Changed 12 years ago by Eugene Lazutkin

Resolution: fixed
Status: newclosed

Fixed in 0.9.

Note: See TracTickets for help on using tickets.