• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Stop wasting time looking for files and revisions! Dokkio, a new product from the PBworks team, integrates and organizes your Drive, Dropbox, Box, Slack and Gmail files. Sign up for free.

View
 

Sortable

Page history last edited by Nathanaël Silverman 7 years, 1 month ago

 

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

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

 


 

 

 

 

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

You don't have permission to comment on this page.