I have seen some implementations of sortables list and none really fits my needs. Here is an ultra lightweight jQuery plugin (2.6kb minified!!!!!!!!!) that will do the job right, loads fast and harness the jQuery’s power create a very usable sortable nested list.

Usage

$(cssSelector).jTree ({
showHelper: false,
hOpacity: 0.5,
hBg: "#FCC",
hColor: "#222",
pBorder: "1px dashed #CCC",
pBg: "#EEE",
pColor: "#222",
pHeight: "20px",
snapBack: 300,
childOff: 20
});

All of the options are optional

showHelper: show a clone of the current element that will follow mouse movement
hOpacity: helper's opacity
hBg: helper's background
hColor: helper's text color
pBorder: the border for placement mark
pBg: the background for placement
pColor: the text color for placement
pHeight: the height for placement
snapBack: number of miniseconds to snap back to original position if there is no placement container
childOff: number of pixels from left of element before deciding that the element should be child/sibling of current hovered element

Example

$(document).ready(function(){
$("#yahoo").jTree({
showHelper: false,
hOpacity: 0.5,
hBg: "#FCC",
hColor: "#222",
pBorder: "1px dashed #CCC",
pBg: "#EEE",
pColor: "#222",
pHeight: "20px",
snapBack: 300,
childOff: 20
});
});

• a -apple
• b - bee
• c - caterpillar
• d - donkey