Description
The Draggable plug-in (jquery.ui.draggable.js) allows us to move elements around the page.
Options
Default options are marked in bold. Possible options are contained within the square brackets.
addClasses: true [ true | false ]
When true will add class "ui-draggable" to draggable element, and "ui-draggable-dragging" on drag
appendTo: "parent" [ "any DOM element" ]
Helper is appended to the selected element
axis: false [ "x" | "y" | false ]
Constrains movement to the x- or y-axis
cancel: [ "any DOM element" | "any jQuery selector" ]
Element not to be used as the drag handle
connectToSortable: false [ "any DOM element" | "any jQuery selector" | false ]
Used to interact with sortables
containment: false [ "any DOM element" | "any jQuery selector" | array | false ]
Constrains movement by defining the boundaries of the draggable area
cursor: "auto" [ "css cursor value"]
Sets the display of the cursor
cursorAt: false [ array | false ]
Position the cursor while dragging the element eg. cursorAt:{top:-20,left:-20}
delay: 0 [ integer ]
Time delay in milliseconds before dragging begins
distance: 1 [ integer ]
Distance in pixels before dragging begins
drag: [ function ]
drag function is fired during drag
grid: false [ [integer,integer] | false ]
Snaps the draggable to a grid - height and width in pixels
handle: false [ "any DOM element" | "any jQuery selector" | false ]
Element to be used as the drag handle
helper: "original" [ "clone" | "original" | function ]
Provides visual feedback when the element is being dragged
iframeFix: false [ true | false ]
Use true when iframes are present - DIV with class "ui-draggable-iframeFix" is appended temporarily to BODY
opacity: false [ integer | false ]
Sets the opacity of the helper
revert: false [ true | false | "invalid" ]
On stop drag, element returns to its original position
revertDuration: 500 [ integer ]
Revert duration time (milliseconds)
scroll: true [ true | false ]
Scrolls the draggable parent ("oveflow:auto" must be given to parent)
scrollSensitivity: 20 [ integer ]
When scroll is triggered (pixels)
scrollSpeed: 20 [ integer ]
Scroll speed (pixels)
snap: false [ "any DOM element" | "any jQuery selector" | true | false ]
Snaps the draggable to the inner or outer boundaries of a DOM element, or when true snaps to other draggable elements
snapMode: [ "inner" | "outer" | "both" ]
Used in conjunction with snap
snapTolerance: 20 [ integer ]
Distance in pixels the draggable must be from the element when snapping is invoked
stack: false [ "any DOM element" | "any jQuery selector" | false ]
Sets the last dragged element to display on top
start: [ function ]
start function is fired when dragging begins
stop: [ function ]
stop function is fired when dragging stops
zIndex: false [ integer | false ]
Sets the z-index of the helper
Notes
- Depends:
- jquery.ui.core.js
- jquery.ui.mouse.js
- jquery.ui.widget.js
