My favorites | Sign in
Project Home Downloads
READ-ONLY: This project has been archived. For more information see this post.
Search
for
  Advanced search   Search tips   Subscriptions
Issue 35: Drag'n'drop support
14 people starred this issue and may be notified of changes. Back to list
Status:  Verified
Owner:  moo...@wwwendt.de
Closed:  Nov 2010


 
Project Member Reported by moo...@wwwendt.de, Sep 9, 2008
Add some events for easy implementation of drag'n'drop behaviour.
Feb 13, 2009
Project Member #2 moo...@wwwendt.de
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

Labels: -Milestone-Discussion Milestone-Release0.5
Mar 8, 2009
Project Member #3 moo...@wwwendt.de
- 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!
Apr 17, 2009
#4 adamjpfi...@gmail.com
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.
Apr 18, 2009
Project Member #5 moo...@wwwendt.de
Reorganizing the version numbers (does not affect the planned schedule)
Labels: Milestone-Release1.0
Jul 25, 2009
Project Member #6 moo...@wwwendt.de
 Issue 111  has been merged into this issue.
Aug 21, 2009
#7 ivars...@gmail.com
Drag'n drop is a killer feature :-)
Dec 17, 2009
#8 Uri.Zer...@gmail.com
Hi,
We are using DT heavily -- successfully.
Really could use D&D.
What's the status?
Uri
 


Dec 19, 2009
Project Member #9 moo...@wwwendt.de
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.
Aug 19, 2010
Project Member #10 moo...@wwwendt.de
 Issue 150  has been merged into this issue.
Oct 28, 2010
Project Member #11 moo...@wwwendt.de
The current 1.0.0.alpha features d'n'd. Still open for comments.
Oct 28, 2010
Project Member #12 moo...@wwwendt.de
(No comment was entered for this change.)
Status: Started
Oct 31, 2010
#13 oll...@gmail.com
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.
Oct 31, 2010
Project Member #14 moo...@wwwendt.de
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!

Nov 1, 2010
#15 oll...@gmail.com
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.


Nov 1, 2010
Project Member #16 moo...@wwwendt.de
cool, I'm travelling the next days, but will look into it soon...
Nov 5, 2010
Project Member #17 moo...@wwwendt.de
>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?

Nov 5, 2010
#18 oll...@gmail.com
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!
Nov 5, 2010
Project Member #19 moo...@wwwendt.de
If you can'T wait for the update: I checked the lazy-loading patch in ;-)
    https://code.google.com/p/dynatree/source/detail?r=383
Nov 5, 2010
#20 oll...@gmail.com
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;
	            }
          	},
Nov 6, 2010
Project Member #21 moo...@wwwendt.de
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.
Nov 7, 2010
Project Member #22 moo...@wwwendt.de
 Issue 128  has been merged into this issue.
Nov 8, 2010
#23 oll...@gmail.com
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?
Nov 14, 2010
Project Member #24 moo...@wwwendt.de
(No comment was entered for this change.)
Status: Fixed
Jul 17, 2012
Project Member #25 moo...@wwwendt.de
considered verified
Status: Verified

Powered by Google Project Hosting