aciTree drag & drop sorting demo - A treeview control with jQuery

The sortable extension is using the aciSortable plugin, the available callback init options and the options parameter of the event handler receives the properties as defined by aciSortable (see the docs). aciTree adds a few extra events on top of aciSortable so we can handle with ease the drag start and check for a valid drop target. In this way we can limit what items can be dragged and where they can be dropped.

For dragging tree items out of the tree - check this demo.

See the examples below for what can be done by responding to only two events: beforedrag and checkdrop.

Note: you can also implement your own options.sortDrag and options.sortValid callbacks to set the helper (the element that follows the mouse pointer when in drag) the way you want. For the default implementation - check the source code of the sortable extension.

The default implementation (options.sortable needs to be active), you can drag & drop items anywhere, before or after another one, set as a child of a leaf node (it will be transformed in a inode by default), the parent can be changed:

see the JSON behind this tree
The easy way to find a car that's right for you
Tree Log... clear log

Limit the number of newly created tree levels to only #3 (we wont be able to add more than #3 levels deep but still be able to sort existing items in more than #3 levels deep):

see the JSON behind this tree
The easy way to find a car that's right for you
Tree Log... clear log

Limit the items that can be dragged around to just leaf items:

see the JSON behind this tree
The easy way to find a car that's right for you
Tree Log... clear log

Items can be dragged around only inside the same parent (items can't change parent):

see the JSON behind this tree
The easy way to find a car that's right for you
Tree Log... clear log