Drag'n'drop support

[GoogleCodeExporter]

Add some events for easy implementation of drag'n'drop behaviour.

Original issue reported on code.google.com by moo...@wwwendt.de on 10 Sep 2008 at 6:34

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

First collection of ideas
- Use the standard ui.jquery Draggable/Droppable API
- Should be performant with big trees
- Support insertion of nodes at random points: issue #73
- callbacks for canDrag, canDrop, ...
- nice visual echoes while dragging
- where should the node2 be created, when dropping on node1:
  As first child, or as sibling?
  We need a visual echo here
- We need a copy function that takes care to avoid duplicate keys: #74
- Prevent creating a recursion (cannot drop inside the source branch)
- support for d'n' between 
  - nodes of the same tree
  - nodes of different trees
  - drop any external item over a node
  - drag a node somewhere else

Original comment by moo...@wwwendt.de on 14 Feb 2009 at 7:03

• Added labels: Milestone-Release0.5
• Removed labels: Milestone-Discussion

[GoogleCodeExporter]

- should we expand a node, when the droppable lingers over a collapsed node?
- should we auto-scroll while dragging?
- how to decide whether to copy or move?
- different echo, when moving/copying
- when copying, prevent duplicate keys!

Original comment by moo...@wwwendt.de on 8 Mar 2009 at 9:12

[GoogleCodeExporter]

i'm definitely for this feature.

i'm making heavy use of the dynatree plugin with a web-based mapping 
application and
would like to use the d 'n d functionality to re-order the way certain layers 
appear
on the map.

Original comment by adamjpfi...@gmail.com on 18 Apr 2009 at 1:13

[GoogleCodeExporter]

Reorganizing the version numbers (does not affect the planned schedule)

Original comment by moo...@wwwendt.de on 19 Apr 2009 at 5:36

• Added labels: Milestone-Release1.0

[GoogleCodeExporter]

Issue 111 has been merged into this issue.

Original comment by moo...@wwwendt.de on 25 Jul 2009 at 9:23

[GoogleCodeExporter]

Drag'n drop is a killer feature :-)

Original comment by ivars...@gmail.com on 21 Aug 2009 at 7:03

[GoogleCodeExporter]

Hi,
We are using DT heavily -- successfully.
Really could use D&D.
What's the status?
Uri

Original comment by Uri.Zer...@gmail.com on 18 Dec 2009 at 12:59

[GoogleCodeExporter]

You're right, it is somewhat overdue.
Today I had a quick look at the Draggable Plugin and started to build a sample.
See issue #127

This is not a replacement for the build-in D'n'd, but may help in simpler use 
cases.
Also it may help to define the requirements, so feedback is welcome.

Original comment by moo...@wwwendt.de on 20 Dec 2009 at 7:42

[GoogleCodeExporter]

Issue 150 has been merged into this issue.

Original comment by moo...@wwwendt.de on 19 Aug 2010 at 7:07

[GoogleCodeExporter]

The current 1.0.0.alpha features d'n'd. Still open for comments.

Original comment by moo...@wwwendt.de on 28 Oct 2010 at 6:59

[GoogleCodeExporter]

Original comment by moo...@wwwendt.de on 28 Oct 2010 at 7:00

• Changed state: Started

[GoogleCodeExporter]

I would love an example of how you use this with drag and drop in between 
nodes. I just upgraded to 1.0.0 alpha2 and although the tree functionality is 
back in action, the drag and drop action is not. Not in between nodes, but just 
in general. I was using a _bindDragAndDrop() method to initialize this.

I changed all references to ui-dynatree-document to ui-dynatree-node and 
anything with ui-dynatree is now dynatree. But the big one for me would be able 
to do rearranging straight in the tree view. Not just dragging onto a container 
to make a child.

Original comment by oll...@gmail.com on 31 Oct 2010 at 10:11

[GoogleCodeExporter]

alpha2 comes with three dnd examples in the example browser.

You have to download the zip file, because the online samples and docs are 
still 0.5.

There is no need to call any bind functions: simply initialize the tree with 
the new `dnd` option and define callbacks there. 
Have a look at 'view source' in the sample pages.

Thanks for testing this!

Original comment by moo...@wwwendt.de on 1 Nov 2010 at 6:33

[GoogleCodeExporter]

Nice one. Stupid me to not look. So here are my intiial findings.

under dnd option, the autoExpandMS: 1000 does not seem to allow my lazily 
loaded branches to load.

references to node.isFolder needed to be changed to node.data.isFolder. This 
might have to do with the way that I am building my tree. I am using the 
data="array of options" method.

In my onDragOver function I have something like alert(node.data.isFolder); but 
it is never executed UNTIL I hover over a node that is a folder. It will then 
alert true and then all subsequent roll overs will alert their cooresponding 
value.

My nodes are never highlighting. I can see the line in between the nodes, but 
the actual text itself to indicate that it is droppable is never being 
highlighted with the blue box. I can indeed drop things onto them, it just 
seems the CSS class is not getting loaded.

Original comment by oll...@gmail.com on 1 Nov 2010 at 11:27

[GoogleCodeExporter]

cool, I'm travelling the next days, but will look into it soon...

Original comment by moo...@wwwendt.de on 1 Nov 2010 at 4:49

[GoogleCodeExporter]

>under dnd option, the autoExpandMS: 1000 does not seem to allow my lazily 
loaded branches to load.
I fixed that, thanks.

>references to node.isFolder needed to be changed to node.data.isFolder. This 
might have to do with the way that I am building my tree. I am using the 
data="array of options" method.
isFolder was always an attribute of node.data, not a direct member, so that is 
OK.

>In my onDragOver function I have something like alert(node.data.isFolder); but 
it is never executed UNTIL I hover over a node that is a folder. It will then 
alert true and then all subsequent roll overs will alert their cooresponding 
value.
I could reproduce this, but don't have a solution yet.
It's probably not a good idea to bring up a dialog while dragging, since this 
will confuse the mouse handler.
Maybe I add tree.cancelDrag() method that you could call before calling 
alert()...

>My nodes are never highlighting. I can see the line in between the nodes, but 
the actual text itself to indicate that it is droppable is never being 
highlighted with the blue box. I can indeed drop things onto them, it just 
seems the CSS class is not getting loaded.
Does this happen in standard samples, or in only your code? Could you provide 
a sample then?
What browser are you using?

Original comment by moo...@wwwendt.de on 5 Nov 2010 at 8:01

[GoogleCodeExporter]

Removed the popup to get you a test and it seems the nodes are highlighting as 
I would want so I think it was  abdly reported problem, sorry.

Once I get the lazy loading going, i think im golden!

Original comment by oll...@gmail.com on 5 Nov 2010 at 8:07

[GoogleCodeExporter]

If you can'T wait for the update: I checked the lazy-loading patch in ;-)
    http://code.google.com/p/dynatree/source/detail?r=383

Original comment by moo...@wwwendt.de on 5 Nov 2010 at 12:13

[GoogleCodeExporter]

Lazy loading works. Thanks.

Below is what I believe to be the relevant code to what I am trying to do. I am 
finding that if I want to drag an object in between other objects that are of 
type "folder", I do not get the little line indicating I can drop. I realize I 
am returning ['over'] only but when I tried using true or all three options, 
the folder became undroppable.

            onDragEnter: function(node, sourceNode) {
                /** sourceNode may be null for non-dynatree droppables.
                 *  Return false to disallow dropping on node. In this case
                 *  onDragOver and onDragLeave are not called.
                 *  Return 'over', 'before, or 'after' to force a hitMode.
                 *  Return ['before', 'after'] to restrict available hitModes.
                 *  Any other return value will calc the hitMode from the cursor position.
                 */
                logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
                // Prevent dropping a parent below it's own child
                if (sourceNode.data.plugin_type != 'business_listing' && node.data.plugin_type == 'listing_container') {
                    return false;
                }
                if(node.data.isFolder) {
                    return ['over'];
                }
                if(node.isDescendantOf(sourceNode)) {
                    return false;
                }                               

                return true;
            },
            onDragOver: function(node, sourceNode, hitMode) {
                /** Return false to disallow dropping this node.
                 *
                 */             
                logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
                // Prohibit creating childs in non-folders (only sorting allowed)
                if( !node.data.isFolder ) {
                    return false;
                }
            },

Original comment by oll...@gmail.com on 5 Nov 2010 at 6:24

[GoogleCodeExporter]

Difficult to tell without a running example. I'd suggest to use logMsg to find 
out which condition doesn't behave as you expect...
(The first dnd sample seems to work for a similar problem.)
Btw: 'preventVoidMoves: true' would suppress the insertion marker for 'move 
before myself', etc.

Original comment by moo...@wwwendt.de on 6 Nov 2010 at 7:40

[GoogleCodeExporter]

Issue 128 has been merged into this issue.

Original comment by moo...@wwwendt.de on 8 Nov 2010 at 6:48

[GoogleCodeExporter]

Just want to say Thank You for getting this done and supporting me. My latest 
problem was an ordering in my checking problem which has been resolved. From 
what I can tell, this is all working very nice, thanks.

Enhancement maybe... (and this could be my browser or something)... If i click 
a node at the bottom of a tree and then move up the tree it will show the drag 
lines and drop box no problem fast and smooth, but when I change direction and 
go back down the tree (all the while holding the mouse down) the tree will lag 
and I wont see the drop lines or highlight for a second or two. I generally 
have to "shake" the mouse around to get it to wake up and give me the lines 
again. Something to do with lazy loading maybe?

Original comment by oll...@gmail.com on 8 Nov 2010 at 12:31

[GoogleCodeExporter]

Original comment by moo...@wwwendt.de on 14 Nov 2010 at 2:12

• Changed state: Fixed

[GoogleCodeExporter]

considered verified

Original comment by moo...@wwwendt.de on 17 Jul 2012 at 4:12

• Changed state: Verified