type: interaction

release: 1.0

priority: -

status: complete

documentation: http://docs.jquery.com/UI/Draggable

demo: http://jqueryui.com/demos/draggable

 

 

---

 

1 - Description:

 

A draggable is behaviour that you can assign to any element. The element can then be repositioned using the mouse, and when used with the Droppable component, dropped on a specific target. The visual and logical behaviour is highly configurable and comes with all kinds of different options.

 

---

 

2 - Visual Design:

 

N/A

 

---

 

 

3 - Functional Specifications/Requirements:

 

Options/Methods/Callbacks

• options:
  • addClasses (Boolean | default: true)
  • appendTo (Element, Selector | default: 'parent')
  • axis (String | default: false)
    • Possibe string values: 'x', 'y'
  • cancel (Selector | default: ':input,option')
  • connectToSortable (Selector | default: false)
  • containment (Selector, Element, String, Array | default: false)
    • Possible string values: 'parent', 'document', 'window'
    • Array values: [x1, y1, x2, y2]
  • cursor (string | default: 'auto')
  • cursorAt (Object | default: false)
    • Object properties: { top, left, right, bottom }
  • delay (Integer | default: 0)
  • distance (Integer | default: 1)
  • grid (Array | default: false)
    • Array values: [x, y]
  • handle (Element, Selector | default: false)
  • helper (String, Function | default: 'original')
    • Possible string values: 'original', 'clone'
    • Function return type: DOMElement
  • iframeFix (Boolean, Selector | default: false)
  • opacity (Float | default: false)
  • refreshPositions (Boolean | default: false)
  • revert (Boolean, String | default: false)
    • Possible string values: 'valid', 'invalid'
  • revertDuration (Integer | default: 500)
  • scope (String | default: 'default')
  • scroll (Boolean | default: true)
  • scrollSensitivity (Integer | default: 20)
  • scrollSpeed (Integer | default: 20)
  • snap (Boolean, Object | default: false)
    • Object properties: { items: Selector, snap: Function, release: Function }
  • snapMode (String | default: 'both')
    • Possible string values: 'outer', 'inner', 'both'
  • snapTolerance (Integer | default: 20)
  • stack (Object | default: false)
    • Object properties: { group: Selector, min: Integer }
  • zIndex (Integer | default: false)
• methods:
  • (none)
• callbacks:
  • start (events: mousedown)
  • drag (events: mousemove)
  • stop (events: mouseup)

 

Specifications

• if the helper is set to 'original', the dragged element must not have position 'static'
• the mousedown is automatically cancelled (like the cancel option) on resizable handles (.ui-resizable-handle) to not conflict
• the helper is only appended to options.appendTo if it's not already in the DOM
• draggable supports relative, fixed and static positioning. 'absolute' is the default, special implementations for the others. 'relative' substracts the current relative position from the result, 'fixed' substracts unwanted scroll offsets
• on mousedown, the draggable needs to know if it was dropped on a valid target and therefore checks back with droppables/sortables. It's then used for the revert 'invalid/valid' options for instance.
• start callback: triggers when movement starts via mouse(mousedown).
• drag callback: triggers during movement via mouse(drag/mousemove).
• stop callback: triggers when movement stops via mouse(mouseup). Fires after normalization and reverting has happened.

 

---

 

4 - Markup & Style:

 

     4.1 Initial markup examples

 

     (not applicable)

 

     4.2 Recommended transformed HTML markup

 

     (not applicable)

 

     4.3 Accessibility recommendation

 

    (Detailed recommendations for ARIA, HTML markup, CSS and javascript that will contribute to universal access and full section 508 accessibility for screen readers, mobile devices and any other devices) 

 

     4.4 CSS & Theme

 

    (not applicable) 

 

---

 

5 - Latest version of plugin:

 

http://jquery-ui.googlecode.com/svn/trunk/ui/ui.draggable.js

 

---

 

6 - Open issues being discussed

 

(Use this area to place things that we're hashing out like featuresand options we're not sure we should include, questions about how this fits into UI and relates to other widgets and utilities, known problems, whether features should be broken across multiple releases, etc.)

 

---