jsTree v.1.0 - dnd documentation

# 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

- Root node 1
  - Child node 1
  - Child node 2
- Root node 2

### Reorder only demo

- Root node 1
  - Child node 1
  - Child node 2
  - Child node 3
  - Child node 4
- Root node 2
- Root node 3

## 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.