The dnd
plugin enables drag'n'drop support for jstree, also using foreign nodes and drop targets.
All foreign node options and callback functions in the config (drop_target, drop_check, drop_finish, drag_target, drag_check, drag_finish) are to be used ONLY when nodes that are not part of any tree are involved.
If moving nodes from one tree instance to another - just listen for the "move_node.jstree" event on the receiving tree.
DO NOT SET drag_target AND drop_target to match tree nodes!
The special key used to make a drag copy instead of move ("ctrl"
, "shift"
, "alt"
, "meta"
).
The number of milliseconds to wait before checking if a move is valid upon hovering a node (while dragging). 200
is a reasonable value - a higher number means better performance but slow feedback to the user, a lower number means lower performance (possibly) but the user will get feedback faster.
The number of milliseconds to wait before opening a hovered if it has children (while dragging). This means that the user has to stop over the node for half a second in order to trigger the open operation. Keep in mind that a low value in combination with async data could mean a lot of unneeded traffic, so 500
is quite reasonable.
A jquery selector matching all drop targets (you can also use the comma ,
in the string to specify multiple valid targets). If set to false
drop targets are disabled.
Return false
to mark the move as invalid, otherwise return true
. The data
parameter is as follows:
data.o
- the object being dragged
data.r
- the drop target
Gets executed after a valid drop, you get one parameter, which is as follows:
data.o
- the object being dragged
data.r
- the drop target
A jquery selector matching all foreign nodes that can be dropped on the tree (you can also use the comma ,
in the string to specify multiple valid foreign nodes). If set to false
dragging foreign nodes is disabled.
Return a boolean for each position. The data
parameter is as follows:
data.o
- the foreign object being dragged
data.r
- the hovered node
Gets executed after a dropping a foreign element on a tree item, you get one parameter, which is as follows:
data.o
- the foreign object being dragged
data.r
- the target node
Drag stuff around!
All those functions are used internally only. If you want more information - examine the source code.