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();

Download now

Interface 1.2 146kb (source files, compressed files)
jQuery 1.1.2 19 kb

MediaSecure