Opened 10 years ago

Closed 4 years ago

#10585 closed defect (patchwelcome)

Tree: scrolling triggers a drag

Reported by: isza Owned by:
Priority: high Milestone: 1.13
Component: Dijit Version: 1.4.0
Keywords: dijit tree Cc: Jonathan Bond-Caron
Blocked By: Blocking:


I have a DnD-enabled Tree in a ContentPane? with a scroll bar. In Firefox 3.5 and Internet Explorer 8, after selecting an item, when dragging the scroll bar, the drag operation of the selected item is started. In webkit based browsers everything seems to work.

I have changed dijit.tree.dndSource to dijit._tree.dndSource, and tried the same code with dojo 1.3.2, and the bug disappeared in all the browsers.

Attachments (4)

CPTreeDnD.html (1.8 KB) - added by bill 10 years ago.
tree in contentpane w/dnd
dnd_scrollbar.patch (1.7 KB) - added by Jonathan Bond-Caron 10 years ago.
Sample patch, FF 3.6
a.gif (61.6 KB) - added by Jonathan Bond-Caron 9 years ago.
Current dnd source behavior
b.gif (39.3 KB) - added by Jonathan Bond-Caron 9 years ago.
Possible new behavior

Download all attachments as: .zip

Change History (26)

comment:1 Changed 10 years ago by Adam Peller

Milestone: 1.4.1tbd

comment:2 in reply to:  1 Changed 10 years ago by isza

Replying to peller:

This is a regression, because it works in 1.3.2, and it doesn't work in 1.4.0.

comment:3 in reply to:  1 Changed 10 years ago by isza

comment:4 Changed 10 years ago by Adam Peller

Milestone: tbd1.4.1
Summary: Scrolling triggers a drag in dijit.Tree when dnd is enabled[regression]Scrolling triggers a drag in dijit.Tree when dnd is enabled

comment:5 Changed 10 years ago by bill

Resolution: worksforme
Status: newclosed

I tried it, it works fine for me. If you can attach a test case that reproduces then feel free to reopen this ticket.

I'll attach my test case.

Changed 10 years ago by bill

Attachment: CPTreeDnD.html added

tree in contentpane w/dnd

comment:6 Changed 10 years ago by CnEY

Resolution: worksforme
Status: closedreopened

Bill, the bug is not reproducible in your test case because in that case, the scrollbar isn't on the top level node of the tree, but above that, on the content pane. Perhaps that's a legitimate workaround (or even qualifies this as "not a bug"?).

I can give you a way to reproduce this within dijit/tests/tree/test_Tree_DnD.html, in both the tree and non-tree DnD containers. (The following reproduction steps are basically a recap of the conversation that happened between isza, myself, and dmachi in the dojo channel on Jan 4.)

  1. Load
  1. Use Firebug to edit the CSS of the .container class (easy way to find it is activate click-to-inspect, then click one of the gray rounded borders), and add the following styles: height: 50px;

overflow: auto;

  1. Click on an item in one of the DnD containers to select it.
  1. Click and drag the scrollbar to scroll, and you'll see that it also apparently triggers a DnD start event.

If my memory serves me correctly, however, I noticed during the conversation that this also happens in 1.3.2, which means it's not a regression, and presumably therefore not a candidate for 1.4.1.

comment:7 Changed 10 years ago by bill

(As I said above) I need you to actually attach a test case, thanks.

comment:8 Changed 10 years ago by bill

Component: DijitDnD
Milestone: 1.4.2tbd
Owner: set to Eugene Lazutkin
Priority: highlow
Status: reopenednew
Summary: [regression]Scrolling triggers a drag in dijit.Tree when dnd is enabledscrolling triggers a drag

I reread CNeY's comment, and actually this can be reproduced on test_Tree_DnD.html without modifying CSS, just do:

  1. Load
  1. Click on an item in upper right container to select it.
  1. Mouse-down and drag the scrollbar to scroll, and it triggers a DnD start event (the avatar shows up to the right of the scrollbar)

As CNeY said the workaround is to put the scrollbar on the surrounding node, rather than the DnD container node.

Also, not that this isn't a Tree bug, or at least it's not solely a Tree bug, as it happens with a plain DnD container as shown above. Probably the drag shouldn't start unless the mouse down occurs over a drag item? Mouse down over the container doesn't seem sufficient.

Eugene - assigning to you for the bug in the dojo.DnD code.

comment:9 Changed 10 years ago by Eugene Lazutkin

Milestone: tbdfuture
Status: newassigned

comment:10 Changed 10 years ago by kludgeless

Ran into this with a tree inside a BorderContainer?. Everything works fine until the tree's container is resized, at which point this bug surfaces. If you'd like the sample used, I can provide it. As suggested, surrounding the tree with an extra div with "overflow: auto" set fixes the problem. A lot of time was spent tracking down the issue and devising a workaround that actually worked in a more complicated setup, so a fix would be appreciated! :-)

comment:11 Changed 10 years ago by Stefan Bird

This problem seems to be exacerbated by the fact that Tree sets overflow: auto on its domNode every time it's resized:

comment:12 Changed 10 years ago by bill

See also #11491, which suggests setting Tree to overflow: hidden.

Changed 10 years ago by Jonathan Bond-Caron

Attachment: dnd_scrollbar.patch added

Sample patch, FF 3.6

comment:13 Changed 10 years ago by Jonathan Bond-Caron

I've attached sample patch for this, the root of the problem seems to be that dojo should have cross-browser way of finding out if a dom node has a scrollbar and getting the positioning of the scrollbar.

comment:14 Changed 9 years ago by bill

Cc: Jonathan Bond-Caron added

@jbondc - I guess checking for a scrollbar width is one way to solve the issue. ISTM the other way is, as I said above, don't start a drag unless the mouse down occurs over a drag item. IOW, ignore mouse down over the container.

How would you compare those two approaches? Is there something I'm missing about my suggestion that doesn't work?

comment:15 Changed 9 years ago by Jonathan Bond-Caron

It depends on what the expected behavior is...

BEHAVIOR A (currently in dojo) Allow drag to start with a 'mousedown' anywhere in container + 'onmousemove'

In this case, there needs to be some sort scrollbar calculation on some browsers since the standards are lacking in that area.

BEHAVIOR B (what you're suggesting)

Allow drag to start with a 'mousedown' on a node with class 'dojoDndItem' + 'onmousemove'

That would mimic the dnd behavior on windows and I believe most UI's do...

dojo/dnd/Source.js onMouseDown: function(e){ check for 'dojoDndItem' }

IMHO, there are cases when the A is less frustrating for the user then B. But overall, B is a simpler fix and intuitive for users.

I'll attach images for the different behaviors.

Changed 9 years ago by Jonathan Bond-Caron

Attachment: a.gif added

Current dnd source behavior

Changed 9 years ago by Jonathan Bond-Caron

Attachment: b.gif added

Possible new behavior

comment:16 Changed 9 years ago by Mewel

I have the same problem. The workaround with the div works only for the vertical scrollbar.

I don't understand why the priority is set to low. Imho, a dojo tree with dnd is not useable because of this bug.

comment:17 Changed 9 years ago by eeid

I am evaluating the dojo 1.6 tree and this bug makes the tree useless if you need dnd in the tree. This bug should not be low priority. it happens in (ff 4.0+5.0 + chrome).

The problem can be duplicated with the following steps: 1) Select an item in the tree. 2) Click on the horizontal scroll bar and drag the mouse towards the tree. 3) The drag and drop should start.

My temp fix in my evaluation code to fix the issue was like this.


get the tree var tree = dojo.query("#myTree")[0];

if (e.pageX>tree.clientWidth-ScrollBarWidthOrHeight?)




Unfortunately, I tried to fix the dnd with horizontal bar this way, but it did not work.

I found this code to find the scroll bar width\hight. (it's not mine)

function getScrollBarWidthOrHeight () {

var inner = document.createElement('p'); = "100%"; = "200px";

var outer = document.createElement('div'); = "absolute"; = "0px"; = "0px"; = "hidden"; = "200px"; = "150px"; = "hidden"; outer.appendChild (inner);

document.body.appendChild (outer); var w1 = inner.offsetWidth; = 'scroll'; var w2 = inner.offsetWidth; if (w1 == w2) w2 = outer.clientWidth;

document.body.removeChild (outer);

return (w1 - w2);


comment:18 Changed 9 years ago by maheshn

Hi All,

I have the same problem and even after wrapping the tree with an extra div with "overflow: auto" its not working in IE.

Then I tried with another solution, by capturing the scroll event on wrapper DIV component and suppressing the Dnd event by calling 'onDndCancel'. However its working perfectly fine with both horizontal and vertical scroll bar movements, but its not working in IE (its unable to capture 'onscroll' event for DIV ).

Any help will be appreciated.

Thanks Mahesh

comment:19 Changed 9 years ago by tsummerall

Yes, this bug is a big deal because the workarounds are not effective. Please change priority from "low".

comment:20 Changed 8 years ago by bill

Component: DnDDijit
Summary: scrolling triggers a dragTree: scrolling triggers a drag

Essentially dup of #13964, except that this is about the Tree which has it's own version of the DnD code. I'll leave this one open so we don't forget about fixing Tree.

comment:21 Changed 5 years ago by bill

Owner: Eugene Lazutkin deleted
Priority: lowhigh

comment:22 Changed 4 years ago by dylan

Milestone: future1.12
Resolution: patchwelcome
Status: assignedclosed

Given that no one has shown interest in creating a patch in the past 5+ years, I'm closing this as patchwelcome.

Note: See TracTickets for help on using tickets.