search

pcirella / dynatree

Automatically exported from code.google.com/p/dynatree
0 stars 0 forks source link

Add auto-scroll on drag functionality #244

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
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

Original issue reported on code.google.com by vitorbal@gmail.com on 31 Oct 2011 at 11:21

GoogleCodeExporter commented 9 years ago 
Is this going to be done?  Unable to autoscroll while dragging inside dynatree.

Original comment by wbgil...@gmail.com on 16 Dec 2011 at 5:11

GoogleCodeExporter commented 9 years ago 
I will look at the patch; if it works, maybe I can enable it for the next 
release.

Original comment by moo...@wwwendt.de on 16 Dec 2011 at 5:20

GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
Thanks.  The above did not work for me, or won't w/o more modifications. 

Any ETA on next release?

Original comment by wbgil...@gmail.com on 19 Dec 2011 at 5:51

GoogleCodeExporter commented 9 years ago 
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

Original comment by vitorbal@gmail.com on 19 Dec 2011 at 6:02

GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
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.

Original comment by wbgil...@gmail.com on 20 Dec 2011 at 3:45

GoogleCodeExporter commented 9 years ago 
This issue was closed by revision r543.

Original comment by moo...@wwwendt.de on 26 Dec 2011 at 12:49

GoogleCodeExporter commented 9 years ago 
hey moogle,
Thanks for fixing this!
Cheers

Original comment by vitorbal@gmail.com on 26 Dec 2011 at 1:52

GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
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.

Original comment by wbgil...@gmail.com on 28 Dec 2011 at 6:44

GoogleCodeExporter commented 9 years ago 
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

Original comment by moo...@wwwendt.de on 28 Dec 2011 at 7:19

GoogleCodeExporter commented 9 years ago 
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.

Original comment by wbgil...@gmail.com on 28 Dec 2011 at 9:00

Attachments:

GoogleCodeExporter commented 9 years ago 
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

Original comment by moo...@wwwendt.de on 29 Dec 2011 at 8:00

GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
> 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.

Original comment by wbgil...@gmail.com on 29 Dec 2011 at 10:01

GoogleCodeExporter commented 9 years ago 
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?

Original comment by thil.1...@gmail.com on 6 Mar 2014 at 7:14