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")
- 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 helper must overlap the item element horizontally and vertically
- pointer: the pointing device must overlap the item
- touch: helper overlaps item by at least one pixel
Methods
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.)
Comments (13)
Scott González said
at 4:22 pm on Nov 19, 2008
From Rich Caloggero:
Seems like there needs to be some sort of multi-step process.
1. Find the item you want to move and somehow select it;
2. use arrow keys to move it to the right spot in the list;
3. release the element - now its in the new spot.
Another way of thinking about this might be a cut-and-paste metaphore, like
that used in Windows explorer to move files:
1. select the entries you want to move;
2. say "cut to clipboard";
3. move to where you want to place them and say "paste from clipboard".
Scott González said
at 11:21 am on Nov 23, 2008
From Alexander Farkas:
there is a Wai-Aria solution for Drag-n-Drop, that fits sortable, too.
http://www.w3.org/TR/wai-aria-practices/#dragdrop
http://www.w3.org/TR/2008/WD-wai-aria-20080204/#dragdrop
I think it´s not supported yet by any screenreader (and browser), but
this should be used as a future-proof solution.
kae@... said
at 10:58 am on Jul 24, 2009
I've done a bit of work on this to try make nested sortables more stable. please see http://dev.jqueryui.com/ticket/4703 for examples of before and after, and a patch.
Jörn Zaefferer said
at 10:58 am on Aug 2, 2009
According Dan Welllman, connectWith accepts an array of selectors (covered in the jQuery UI 1.6/1.7) book. Here it just says "Selector". There are probably other options that accept array-selectors, which really shouldn't be promoted.
Jörn Zaefferer said
at 11:14 am on Aug 2, 2009
Also the amount of events is odd. Most seem to be variants of over/out - can this be reduced by providing more contet-specific data? Eg. add a source-property to the ui-object to indicate where the item came from (this list or connected list)
Jörn Zaefferer said
at 11:23 am on Aug 2, 2009
There already is a sender-property anyway...
Jörn Zaefferer said
at 11:17 am on Aug 2, 2009
The "Specifications" section must be merged into the listings above it.
Jörn Zaefferer said
at 1:25 pm on Aug 2, 2009
The Portlets demo is broken when displayed in the demo-viewer: the third column is unusable. In addition, the placeholder is too small, causing an unnecessary content shift on drop.
reco said
at 11:54 am on Apr 8, 2011
are there plans to enable to sort multiple items at a time?
tonicospinelli said
at 1:04 pm on Dec 1, 2012
i think this sample can help you:
http://jsfiddle.net/tonicospinelli/y4LGp/
reco said
at 11:54 am on Apr 8, 2011
JJ Geewax said
at 10:15 am on May 3, 2011
It would be great if when an axis is limited, the tolerance mode only cared about the other axis:
https://github.com/jquery/jquery-ui/pull/113
Scott González said
at 9:12 am on May 3, 2013
http://farhadi.ir/projects/html5sortable/
You don't have permission to comment on this page.