Interface elements for jQuery - Documentation - Draggables

Draggables

Creates draggable elements that can eb move across the page.

example

Options:

handle	string or DOMElement	optional	the handel that starts the draggable
revert	boolean	optional	when true, on stop drag the element returns to initial position
ghosting	boolean	optional	when true a copy of the element is moved
zIndex	integer	optional	zIndex depth for the element while in drag
opacity	float ( < 1)	optional	opacity for the element while in drag
grid	mixed (integer or array)	optional	define a grid for draggable to snap to
fx	integer	optional	duration for the effect applied to the draggable
containment	string ('parent' or 'document') or array (left, top, width, height)	optional	define the zone where the draggable can be moved. Use value 'parent' to move it inside parent element, 'document' for not moving it outside the document, so no extra scroll.
axis	string ('vertically' or 'horizontally')	optional	define the axis which the dragged elements moves on
onStart	function	optional	callback function triggered when the dragging starts
onStop	function	optional	callback function triggered when the dragging stops
onChange	function	optional	callback function triggered when the dragging stops and elements was moved at least one pixel
onDrag	function	optional	callback function triggered while the element is dragged. Receives two parameters the x and y coordinates. You can return an object with new coordinates {x: new x, y: new y} so this way you can interact with the dragging process, build your containment for instance.
insideParent	boolean	optional	tell whatever the element is dragged inside its parent
snapDistance	integer	optional	the dragged element is not moved unless is moved more then snapDistance. This way you can prevent accidental dragging
cursorAt	object	optional	the dragged element is moved to the cursor position with the offset specified. Accepts value for top, left, right and bottom offset.
autoSize	boolean	optional	when true the drag helper is resized to its content, instead of the dragged element's sizes
frameClass	String	optional	When is set the cloned element is hidden so only a frame is dragged

Code sample:

$('#drag2').Draggable(
	{
		zIndex: 	1000,
		ghosting:	true,
		opacity: 	0.7
	}
);

DraggableDestroy

A draggable can be destroyed at anytime.

Code sample:

$('#drag2').DraggableDestroy();