jsTree v.1.0 - drag'n'drop plugin

Description

The dnd plugin enables drag'n'drop support for jstree, also using foreign nodes and drop targets.

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 ( ), .start_drag ( )

All those functions are used internally only. If you want more information - examine the source code.