http://mr21.fr/jquery-dragndrop/

DOC jquery-dragndrop.js

// `yourElement` can be a NodeElement or a jQuery object as you want.
var dragndrop = $.plugin_dragndrop(yourElement);

// If you have included the `jquery-selection` plugin
// you can have access to it by calling this:
var selection = dragndrop.selection();

dragndrop
	// By default the duration is set to 200ms but you can specify a new value.
	.duration(150)
	// `.applyThis` is useful if you want to specify the `this` for all your callbacks.
	// By default it's `window`.
	.applyThis(object)
	// The script allow you to bind many callback events:
	.onDrag(function(drops, drags) {
	// When a drag just started, you receive two arrays:
	// `drops` : an array of the parents of the items selected without any duplicate elements.
	// `drags` : an array of the items selected.
	})
	.onDrop(function(drops, drags) {
	// Exaclty the same of `onDrag`.
	// The array `drops` will contain only one element
	// if the user drops correctly his items in a drop area.
	// But if he drops his items nowhere, you'll have several elements in `drops`.
	})
	.onDropOver(function(drop) {
	// When the mouse enter in a drop area, you receive the drop element.
	// You can add it a "hover" class for exemple.
	})
	.onDropOut(function(drop) {
	// Exaclty the same of `onDropOver` but when the mouse leave the area.
	})
	.onDragOver(function(dragLeft, dragRight) {
	// Here it's particular because you receive TWO elements.
	// You don't put an item ON another one but BETWEEN two others!
	// So you receive the item on the left and the item on the right.
	// If you put the mouse on a drop area but NOT on any item
	// the `dragLeft` will be the last items of the drop area
	// and the `dragRight` will be undefined.
	// You can have the reverse behaviour if you put your mouse on the first item.
	// You don't receive undefined,undefined if you enter in a empty drop area.
	})
	.onDragOut(function(dragLeft, dragRight) {
	// Exactly the same of `onDragOver` but when you leave the items.
	});

/*
The plugin set for you many CSS classes on the elements to easily apply CSS in live.

.jqdragndrop-drop is the class for the droppable elements.
But when your mouse is ON these elements, they've a new class: .jqdragndrop-dropHover
So in your CSS file you can just do:
.jqdragndrop-drop {
	...
	}
	.jqdragndrop-dropHover {
		...
		}
You find the same behaviour for the draggable elements:
.jqselection-selectable {
	...
	}
	.jqselection-selectableHoverL {
		...
		}
	.jqselection-selectableHoverR {
		...
		}
"HoverL" --> L for Left
"HoverR" --> R for Right
If you don't understand why there is Left and Right
read the comments in the onDragOver callback over.

So!
With all these classes you can play with the CSS transition etc. :)

And why we need some "xxxHover" classes and not ":hover"?
It's because when you drag some items the cursor
of your mouse will be ALWAYS on these items...
And this detail has been very boring to code :/
*/