Issue 244: Add auto-scroll on drag functionality
Status:  Fixed
Owner: ----
Closed:  Dec 2011
Reported by vitorbal@gmail.com, Oct 31, 2011
What new or enhanced feature are you proposing?
Make dragging work with the auto-scroll functionality, already existant on jquery.ui.draggable.js.
Note however that just adding the scroll option when initializing tree.$tree.draggable (line 3146) is not enough because apparently dynatree doesnt behave well with the scrolling plugin for draggable.
It has something to do with this line of the jquery.ui.draggable.js file (lines 668 and 674):

if(i.scrollParent[0] != document && i.scrollParent[0].tagName != 'HTML') {

The scroll plugin code never gets past this line because the scrollParent[0] is always 'document' when dragging dynatree nodes.
Not sure it helps, but this hack I wrote makes it work:

var scrollOverload = function(i, o) {
  if (o[0] === "scroll") {
    var original = o[1];
    o[1] = function(event, ui) {
      if (ui.helper.data('dtSourceNode')) {
         var treeview = $('#treeview'),
          i = treeview.data("draggable");
         i.scrollParent[0] = this.scrollParent()[0];
        treeview.data("draggable", i);
        original.call(treeview, event, ui);
      }
    };
};
$.each($.ui.draggable.prototype.plugins.start, scrollOverload);
$.each($.ui.draggable.prototype.plugins.drag, scrollOverload);

What goal would this enhancement help you achieve?
Auto scroll when dragging nodes, very useful when the tree is big and the wrapper element has a scrollbar
Dec 16, 2011
Project Member #1 wbgil...@gmail.com
Is this going to be done?  Unable to autoscroll while dragging inside dynatree.
Dec 16, 2011
Project Member #2 moo...@wwwendt.de
I will look at the patch; if it works, maybe I can enable it for the next release.
Status: Accepted
Labels: Milestone-Release1.2.1
Dec 19, 2011
Project Member #4 wbgil...@gmail.com
Thanks.  The above did not work for me, or won't w/o more modifications. 

Any ETA on next release?
Dec 19, 2011
#5 vitorbal@gmail.com
Hi wbgillis,

For my above hack to work, you also need to add the following 3 lines to the dynatree source code:

3153// Attach ui.draggable to this Dynatree instance
3154	if(dnd && dnd.onDragStart ) {
3155		tree.$tree.draggable({
3156 +		scroll: true,
3157 +		scrollSpeed: 7,
3158 +		scrollSensitivity: 10,
3159		addClasses: false,
3160		appendTo: "body",
		...

Of course the scrollSpeed and scrollSensitivity can be adjusted to your preference. I hope it helps.

Cheers
Dec 20, 2011
Project Member #7 wbgil...@gmail.com
vitorbal, thanks very much for replying.  Unfortunately, it still doesn't work. :-(
Perhaps because I have a different version of dynatree.  

The "if(dnd && dnd.onDragStart ) {" was found at a different line number, so I think I'm on a different version of dynatree and perhaps there's more moving parts to consider.  

But, thanks VERY MUCH for taking the time to reply.
Dec 26, 2011
Project Member #8 moo...@wwwendt.de
This issue was closed by revision r543.
Status: Fixed
Dec 26, 2011
#9 vitorbal@gmail.com
hey moogle,
Thanks for fixing this!
Cheers
Dec 28, 2011
Project Member #13 wbgil...@gmail.com
I'm not clear if the "container" means the actual <ul> of the tree itself, or perhaps a <div> that contains the tree?

I updated my local Example Browser with v1.2.1 files.  Dynatree CSS shows the <ul> with ul.dynatree-container CSS style having 'overflow: scroll'.  But, that still doesn't scroll if I drag something inside the tree.  

Originally, I thought the containing element (in my case, a div) must have 'overflow:scroll'.  But, that isn't working either (FF, IE and Chrome).


Lastly, is this intended to work if the containing div has 'overflow-x: hidden;'?  I cannot have a horizontal scrollbar per my requirements, so only overflow-y is scrollable.
Dec 28, 2011
Project Member #14 moo...@wwwendt.de
I just uploaded v1.2.1 RC1.
This sample should work (expand a few nodes to get scrollbars)

http://wwwendt.de/tech/dynatree/doc/sample-dnd2.html
Dec 28, 2011
Project Member #15 wbgil...@gmail.com
Tried above example in three browsers, but not working (or with x-scroll issues):

1. Chrome v12 - appears body is still the container.  (See attached .png.  Draggable inside redbox at bottom).

2. FireFox 8.0 - it does scroll, but I have to mousemove on horizontal scrollbar for autoscroll.  Also, I can go horizontal infinitely, meaning all treeview nodes go out of visibility.  (See attached .png.  Draggable not visible outside treeview)

3. IE v9 - pretty much same thing as FF, so no .png attached.
dynatree - autoscroll not working - FF8.0.png
36.8 KB   View   Download
dynatree - autoscroll not working - Chrome 12.0.742.112.png
41.8 KB   View   Download
Dec 29, 2011
Project Member #16 moo...@wwwendt.de
Hi,

thanks for taking the time!

If I remember correctly, I had to clear the cache for Chrome to work - could you try this?
The inifinte scroll seems to be a 'feature'(?) at least I observe it here too:
http://jqueryui.com/demos/draggable/

Martin
Dec 29, 2011
Project Member #18 wbgil...@gmail.com
> http://jqueryui.com/demos/draggable/

Understood.  Fwiw, though, if the styling in above demo is below, it prevents horizontally scrolling tree nodes out-of-sight (only vertical scrolling is allowed, and the programmer has control over width, thus better solution?

#demo-frame {
    border: 1px solid #DDDDDD;
    clear: right;
    height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    width: 520px;
}

Lastly, it would take some time to setup (not sure how, but trial and error would get it) the treeview should not scroll nodes out-of-sight vertically either.  That is, once the last node comes into visibility, vertical scrolling should stop.

In summary, scrolling in any way does not scroll tree nodes out-of-sight is probably what any user would expect, no?  :-)

And, thanks to you for taking the time.  
Mar 5, 2014
#19 thil.1...@gmail.com
I am facing issue while dragging the node vertical scrollbar is not scrolling to drop when the tree has huge nodes with fixed height.

Is this issue has been fixed? could any one please help me fix the same?