Opened 14 years ago
Closed 14 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 14 years ago by
- have you filed a cla (www.dojotoolkit.org/icla.txt)? you need to.
- 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)?
- 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 14 years ago by
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 14 years ago by
Component: | General → DnD |
---|---|
Milestone: | → 0.5 |
Owner: | changed from anonymous to psowden |