Issue 321: Drag helper icons display offset is incorrect
Status:  Fixed
Owner: ----
Closed:  Jul 2012
Reported by sh...@thecranes.net.nz, Jun 5, 2012
What steps will reproduce the problem?
1. Insert a jQuery UI Tabs control
2. Offset the Tab's outer div from position 0,0 within the document
3. Place a dynaTree control inside a Tab
4. Drag a node

Attached. Note that you will need jQuery Tabs. I have attached my theme roll for convenience (cuptertino.zip)

What is the expected output? What do you see instead?
Expect:
Helper icons to display in the correct position
Currently:
Helper icons are displayed offset within the tabs area by the amount that the Tabs div is offset within the document (see attached  Issue 3  Example.jpg)

What version of the dynatree and jQuery are you using?
$Version: 1.2.1_rc3$
$Revision: 585, 2012-01-10 00:07:39$
* jQuery JavaScript Library v1.7.1

On what operating system and browser? Chrome 19, Vista 64
What DOCTYPE declaration are you using?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Please provide any additional information below.
This works fine in v1.2.0. 

I believe there are two things playing off against each other here
1. jQuery UI Tabs control uses position: relative for the outer div (jquery-ui-1.8.20.custom.css line 480. )
2. Dynatree uses CSS left and top to position the helper icon(dynatree line 2584-2589):
this.$dndMarker //.offset({left: pos.left, top: pos.top})
.css({
"left": pos.left,
"top": pos.top,
"z-index": 1000
})

The position: relative setting for the Tabs causes everything inside the Tab div, including the tree icons, to be positioned from the top left corner of the Tabs div instead of the top left corner of the document. So when using abosulte positioning via the css this causes the helper icons to be offset incorrectly. Turn position: relative off for the Tab div using Chrome dev tools the drag icons show correctly.

Assuming that this is the actual issue I have found two possible solutions so far:
1. If you revert this back to using .offset({left: pos.left, top: pos.top}) instead of setting left and top in the css then the issue goes away. 
2. If you change line 2557 from var pos = $target.offset(); to var pos = $target.position(); the issue goes away, however, this may have flow on effects when trying to drag between trees within different divs, not sure though as I haven't tried this scenario.

This may be related to  issue #303 .

Thanks.
_test-ISSUE3.html
3.6 KB   View   Download
cupertino.zip
30.1 KB   Download
Issue 3 Example.jpg
28.9 KB   View   Download
Jun 6, 2012
Project Member #2 moo...@wwwendt.de
thanks for this analysis!
Status: Accepted
Labels: Milestone-Release1.2.1
Jun 6, 2012
Project Member #3 moo...@wwwendt.de
Deferred, so v1.2.1 can be released shortly.
Labels: -Milestone-Release1.2.1 Milestone-Release1.2.2
Jun 12, 2012
#4 sh...@thecranes.net.nz
Just a note that it appears this issue was introduced by the fix for  issue 258 , so you'll want to make sure that 258 stays fixed when this gets fixed. Thanks.
Jul 13, 2012
Project Member #6 moo...@wwwendt.de
 Issue 327  has been merged into this issue.
Jul 13, 2012
Project Member #7 moo...@wwwendt.de
 Issue 302  has been merged into this issue.
Jul 13, 2012
Project Member #8 moo...@wwwendt.de
 Issue 172  has been merged into this issue.
Jul 25, 2012
Project Member #9 moo...@wwwendt.de
 Issue 327  has been merged into this issue.
Jul 25, 2012
Project Member #10 moo...@wwwendt.de
This issue was closed by revision r609.
Status: Fixed
Jul 25, 2012
Project Member #11 moo...@wwwendt.de
(No comment was entered for this change.)
Owner: wbgil...@gmail.com
Jul 25, 2012
Project Member #12 moo...@wwwendt.de
 Issue 303  has been merged into this issue.
Oct 3, 2012
#13 endev...@gmail.com
Now the offset is incorrect when using dynatree without jQuery UI Tabs
Oct 3, 2012
Project Member #15 moo...@wwwendt.de
did you try with the latest version from the repository (after 1.2.1)?
If so, could you send a sample page taht reproduces the problem?
Owner: ---
Oct 3, 2012
#16 endev...@gmail.com
Sorry my mistake.
Bug appears with old versions of jQuery UI (tested with 1.7.2).
With 1.8.17 everything works fine.