You are browsing the old site - check the new version out

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

A string. Default is "ctrl".

The special key used to make a drag copy instead of move ("ctrl", "shift", "alt", "meta").

check_timeout

A number. Default is 200.

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

A number. Default is 500.

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 string (jQuery selector) (or false). Default is ".jstree-drop".

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

A function. Default is function (data) { return true; }.

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

A function. Default is $.noop.

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 string (jQuery selector) (or false). Default is ".jstree-draggable".

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

A function. Default is function (data) { return { after : false, before : false, inside : true }; }.

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

A function. Default is $.noop.

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!

I have the jstree-drop class
I have the jstree-draggable class

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.