back to the documentation homepage
jsTree v.1.0
dnd plugin
Description
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!
Configuration
copy_modifier
The special key used to make a drag copy instead of move ("ctrl"
, "shift"
, "alt"
, "meta"
).
check_timeout
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.
open_timeout
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.
drop_target
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.
drop_check
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
drop_finish
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
drag_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.
drag_check
Return a boolean for each position. The data
parameter is as follows:
data.o
- the foreign object being dragged
data.r
- the hovered node
drag_finish
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
Demos
Using the dnd plugin
Drag stuff around!
Reorder only demo
API
.dnd_prepare ( ), .dnd_show ( ), .dnd_open ( ), .dnd_finish ( ), .dnd_enter ( ), .dnd_leave ( ), .start_drag ( )
All those functions are used internally only. If you want more information - examine the source code.