| Issue 35: | Drag'n'drop support | |
| 14 people starred this issue and may be notified of changes. | Back to list |
Add some events for easy implementation of drag'n'drop behaviour.
Feb 13, 2009
Project Member
#2
moo...@wwwendt.de
Labels:
-Milestone-Discussion Milestone-Release0.5
Mar 8, 2009
- 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
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
Reorganizing the version numbers (does not affect the planned schedule)
Labels:
Milestone-Release1.0
Jul 25, 2009
Issue 111 has been merged into this issue.
Aug 21, 2009
Drag'n drop is a killer feature :-)
Dec 17, 2009
Hi, We are using DT heavily -- successfully. Really could use D&D. What's the status? Uri
Dec 19, 2009
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
Issue 150 has been merged into this issue.
Oct 28, 2010
The current 1.0.0.alpha features d'n'd. Still open for comments.
Oct 28, 2010
(No comment was entered for this change.)
Status:
Started
Oct 31, 2010
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
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
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
cool, I'm travelling the next days, but will look into it soon...
Nov 5, 2010
>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
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
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
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
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
Issue 128 has been merged into this issue.
Nov 8, 2010
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
(No comment was entered for this change.)
Status:
Fixed
Jul 17, 2012
considered verified
Status:
Verified
|