type: interaction

release: N/A

status: in development

documentation: N/A

Note: This plugin is being rewritten for the 2.0 release. This documentation is about the rewrite, not the existing plugin.

TODOs:

• provide backCompat for all existing options for 2.0, except for delay

1 - Description:

Sortable gives any HTML element the ability to be dragged and dropped to re-order them.

2 - Visual Design:

N/A

3 - Functional Specifications/Requirements:

Options

• accept ( string, Selector, Function, default "*" )
• Controls which draggable elements are accepted by the droppable.
•  Multiple types supported:
•  Selector: A selector indicating which draggable elements are accepted.
•  Function: A function that will be called for each draggable on the page (passed as the first argument to the function). The function must return true if the draggable should be accepted.
• appendTo (various, default: null)
• a selector or element to append the draggable (or helper) to during the drag  
• exclude (string, default: "input,textarea,button,select")
• renamed from cancel
• handle (various, default: null)
• a selector or element that can be used to drag the element
• if a handle is specified, it must be a descendant of the draggable element 
• helper (various, default: false)
• a boolean
• when set to false, the original element will be dragged and no helper will be generated
• when set to true, a clone of the element will be dragged
• NOTE: If the element or any descendants have IDs, they will be removed from the cloned helper 
• a function
• must return a jQuery object or DOMElement to use as the helper
• TODO: figure out the signature for this
• items ( Selector, '> *' )
• Specifies which items inside the element should be sortable.
• placeholder ( Function, default null )
• null clones dimensions of sortable item
• Function takes argument which is the item that's sorting. Return element to be used for placeholder. Always wrap element with jQuery
• tolerance (string, default: "intersect")
• intersect: half of the draggable element must overlap the droppable element horizontally and vertically
• touch: the draggable element must overlap the droppable element by at least one pixel
• pointer: the pointing device must overlap the droppable element 
• fit: the draggable element is fully contained within the droppable element

Methods 

• All defaults + refresh

Events

• beforeStart 
• create
• start
• sort
• reposition ( was change )
• stop
• change ( was update )
• add ( was receive )
• remove
• over
• out
• activate
• deactivate

4 - Markup & Style:

     4.1 Initial markup examples

     (not applicable)

     4.2 Recommended transformed HTML markup

     (not applicable)

     4.3 Accessibility recommendation

    See http://build.fluidproject.org/fluid/sample-code/reorderer/image-reorderer/image-reorderer.html

     4.4 CSS & Theme

    (not applicable)

5 - Latest version of plugin:

(Link to the latest version in the jQuery UI trunk here)

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.)