| Issue 244: | Add auto-scroll on drag functionality | |
| 1 person starred this issue and may be notified of changes. | Back to list |
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
Dec 16, 2011
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
Thanks. The above did not work for me, or won't w/o more modifications. Any ETA on next release?
Dec 19, 2011
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
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
hey moogle, Thanks for fixing this! Cheers
Dec 28, 2011
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
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
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.
Dec 29, 2011
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
> 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
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? |