script.aculo.us Drag 'n' Drop

To use script.aculo.us's dragging capabilities, you'll need to load the dragdrop module, which requires the effects module also. So your minimum loading for script.aculo.us will look like this:
<script type="text/javascript" src="/javascript/scriptaculous.js?load=effects,dragdrop">

Dragging Things Around: To make an item drag able using scriptaculous it just requires a creation of an instance of the Draggable class, and identifying the element to be made draggable.
Syntax: new Draggable( element, options );

The first parameter to the constructor identifies the element to be made draggable either as the id of the element, or a reference to the element. The second parameter specifies optional information on how the draggable element is to behave.

Draggable Options:

Option	Description
revert	If set to true, the element returns to its original position when the drags ends. Also specifies whether the reverteffect callback will be invoked when the drag operation stops. Defaults to false. e.g.: window.onload = function(id) { new Draggable(id, {revert:true} );}
nap	Used to cause a draggable to snap to a grid or to constrain its movement. If false (default), no snapping or constraining occurs. If an integer x, the draggable will snap to a grid of x pixels. If an array [x, y], the horizontal dragging will snap to a grid of x pixels and the vertical will snap to y pixels. It can also be a function conforming to Function( x , y , draggable ) that returns an array [x, y]. // Snap target to a 50-pixel grid while dragging new Draggable('element', {snap:50}); OR // Constrain dragging to a 100x50px box new Draggable('element', { snap: function(x, y) { return[ (x <> 0 ? x : 0 ) : 100, (y <> 0 ? y : 0) : 50 ];}}); OR // Constrain dragging to element's parent node new Draggable('element', { snap: function(x, y, draggable) { function constrain(n, lower, upper) { if (n > upper) return upper; else if (n < lower) return lower; else return n; } var element = draggable.element.getDimensions( ); var parent = draggable.element.parentNode.getDimensions( ); return [ constrain(x, 0, parent.width - element.width), constrain(y, 0, parent.height - element.height) ];}});
zindex	Specifies the CSS z-index to be applied to the element during a drag operation. By default the element's z-index is set to 1000 while dragging. window.onload = function(id1, id2) { new Draggable(id1, { zindex:1002 }); new Draggable(id2, { zindex:1003 }); }
ghosting	Boolean determining whether the draggable should be cloned for dragging, leaving the original in place until the clone is dropped. Defaults to false. window.onload = function(id) {new Draggable(id, {ghosting:true});}
constraint	A string used to limit the draggable directions, either horizontal or vertical. Defaults to null which means free movement. window.onload = function() {new Draggable('myimage', {constraint:"horizontal"});}
handle	Specifies an element to be used as the handle to start the drag operation. By default an element is its own handle. window.onload = function() { new Draggable('myimage1', {handle: 'myimage2'});}
starteffect	An effect called on element when dragging starts. By default, it changes element's opacity to 0.2 in 0.2 seconds.
reverteffect	An effect called on element when the drag is reverted. Defaults to a smooth slide to element's original position. Only called if revert is true.
endeffect	An effect called on element when dragging ends. By default, it changes element's opacity to 1.0 in 0.2 seconds.

Callback Options: Additionally, you can use any of the following callback functions in the options parameter :

Function	Description
onStart	Called when a drag is initiated.
onDrag	Called repeatedly when a mouse moves, if mouse position changed from previous call.
change	Called just as onDrag (which is the preferred callback).
onEnd	Called when a drag is ended.

Syntax: new Draggable('element', {onEnd: 'effectFunction'});
e.g.
window.onload = function()
{
new Draggable('myimage', { onEnd : function(){new Effect.Opacity('myimage', {from:0, to:1.0, duration:10});}});
}

Dropping Dragged Things: An element is converted into a drop target via a call to the add() method within a namespace called Droppables. The Droppables namespace has two important methods: add() to create a drop target, and remove() to remove a drop target.

Droppables.add( element, options );
Droppables.remove(element);

Droppables Options:

Option	Description
Hoverclass	The name of a CSS class that will be added to element while the droppable is active (has an acceptable draggable hovering over it). Defaults to null.
Accept	A string or an array of strings describing CSS classes. The droppable will only accept draggables that have one or more of these CSS classes.
Containment	Specifies an element, or array of elements, that must be a parent of a draggable item in order for it to be accepted by the drop target. By default, no containment constraints are applied.
Overlap	If set to 'horizontal' or 'vertical' the droppable will only react to a Draggable if its overlapping by more than 50% in the given direction. Used by Sortables and discussed in next chapter.
greedy	If true (default), stops processing hovering other droppables under the draggable won't be searched.

Callback Options:

Function	Description
onHover	Specifies a callback function that is activated when a suitable draggable item hovers over the drop target. Used by Sortables and discussed in next chapter.
onDrop	Specifies a callback function that is called when a suitable draggable element is dropped onto the drop target.