yy-sortable

Class: Sortable

Sortable

new Sortable (element, options)

sortable.js:52

Create sortable list

Name Type Description
element HTMLElement
options object optional
Name Type Default Description
name string sortable optional

dragging is allowed between Sortables with the same name
dragClass string optional

if set then drag only items with this className under element; otherwise drag all children
orderClass string optional

use this class to include elements in ordering but not dragging; otherwise all children elements are included in when sorting and ordering
deepSearch boolean optional

if dragClass and deepSearch then search all descendents of element for dragClass
sort boolean true optional

allow sorting within list
drop boolean true optional

allow drop from related sortables (doesn't impact reordering this sortable's children until the children are moved to a differen sortable)
copy boolean false optional

create copy when dragging an item (this disables sort=true for this sortable)
orderId string data-order optional

for ordered lists, use this data id to figure out sort order
orderIdIsNumber boolean true optional

use parseInt on options.sortId to properly sort numbers
reverseOrder string optional

reverse sort the orderId
offList string closest optional

how to handle when an element is dropped outside a sortable: closest=drop in closest sortable; cancel=return to starting sortable; delete=remove from all sortables
maximum number optional

maximum number of elements allowed in a sortable list
maximumFIFO boolean optional

direction of search to choose which item to remove when maximum is reached
cursorHover string grab -webkit-grab pointer optional

use this cursor list to set cursor when hovering over a sortable element
cursorDown string grabbing -webkit-grabbing pointer optional

use this cursor list to set cursor when mousedown/touchdown over a sortable element
useIcons boolean true optional

show icons when dragging
icons object optional

default set of icons

Name Type Description
reorder string optional
move string optional
copy string optional
delete string optional
customIcon string optional

source of custom image when over this sortable
Fires:
  • event:pickup
  • event:order
  • event:add
  • event:remove
  • event:update
  • event:delete
  • event:copy
  • event:maximum-remove
  • event:order-pending
  • event:add-pending
  • event:remove-pending
  • event:add-remove-pending
  • event:update-pending
  • event:delete-pending
  • event:copy-pending
  • event:maximum-remove-pending
  • event:clicked

Members

Sortable.defaults DefaultOptions static

the global defaults for new Sortable objects

Methods

Sortable.create (elements, options) static

sortable.js:121

create multiple sortable elements

Name Type Description
elements Array.<HTMLElements>
options object

see constructor for options

add (element, index)

sortable.js:137

add an element as a child of the sortable element; can also be used to swap between sortables NOTE: this may not work with deepSearch non-ordered elements; use attachElement instead

Name Type Description
element HTMLElement
index number

attachElement (element)

sortable.js:199

attaches an HTML element to the sortable; can also be used to swap between sortables NOTE: you need to manually insert the element into this.element (this is useful when you have a deep structure)

Name Type Description
element HTMLElement

destroy ()

sortable.js:95

removes all event handlers from this.element and children

removeElement (element)

sortable.js:236

removes all events from an HTML element NOTE: does not remove the element from its parent

Name Type Description
element HTMLElement

Type Definitions

DefaultOptions object

Options for Sortable

Properties:
Name Type Argument Default Description
options.name string <optional>
 sortable

dragging is allowed between Sortables with the same name
options.dragClass string <optional>

if set then drag only items with this className under element; otherwise drag all children
options.orderClass string <optional>

use this class to include elements in ordering but not dragging; otherwise all children elements are included in when sorting and ordering
options.deepSearch boolean <optional>

if dragClass and deepSearch then search all descendents of element for dragClass
options.sort boolean <optional>
 true

allow sorting within list
options.drop boolean <optional>
 true

allow drop from related sortables (doesn't impact reordering this sortable's children until the children are moved to a differen sortable)
options.copy boolean <optional>
 false

create copy when dragging an item (this disables sort=true for this sortable)
options.orderId string <optional>
 data-order

for ordered lists, use this data id to figure out sort order
options.orderIdIsNumber boolean <optional>
 true

use parseInt on options.sortId to properly sort numbers
options.reverseOrder string <optional>

reverse sort the orderId
options.offList string <optional>
 closest

how to handle when an element is dropped outside a sortable: closest=drop in closest sortable; cancel=return to starting sortable; delete=remove from all sortables
options.maximum number <optional>

maximum number of elements allowed in a sortable list
options.maximumFIFO boolean <optional>

whether to use first-in-first-out (or last-in-first-out) to choose which item to remove when maximum is reached
options.cursorHover string <optional>
 grab -webkit-grab pointer

use this cursor list to set cursor when hovering over a sortable element
options.cursorDown string <optional>
 grabbing -webkit-grabbing pointer

use this cursor list to set cursor when mousedown/touchdown over a sortable element
options.threshold number <optional>
 10

minimum movement distance in pixels before calculating a movement
options.useIcons boolean <optional>
 true

show icons when dragging
options.icons object <optional>

default set of icons

Properties
Name Type Argument Description
reorder string <optional>
move string <optional>
copy string <optional>
delete string <optional>
options.customIcon string <optional>

source of custom image when over this sortable

Events

add

sortable.js:1220

fires when an element is added to this sortable

Properties:
Name Type Description
element HTMLElement

added
sortable Sortable

where element was added

add-pending

sortable.js:1269

fires when element is added but not dropped yet

Properties:
Name Type Description
element HTMLElement

being dragged
current Sortable

sortable with element placeholder

add-remove-pending

sortable.js:1283

fires when element is removed after being temporarily added

Properties:
Name Type Description
element HTMLElement

being dragged
current Sortable

sortable with element placeholder

clicked

sortable.js:1318

fires when an element is clicked without dragging

Properties:
Name Type Description
element HTMLElement

clicked
sortable Sortable

where element is a child

copy

sortable.js:1241

fires when a copy of an element is dropped

Properties:
Name Type Description
element HTMLElement

removed
sortable Sortable

where element was dragged from

copy-pending

sortable.js:1304

fires when a copy of an element is about to drop

Properties:
Name Type Description
element HTMLElement

removed
sortable Sortable

where element was dragged from

delete

sortable.js:1234

fires when an element is removed from all sortables

Properties:
Name Type Description
element HTMLElement

removed
sortable Sortable

where element was dragged from

delete-pending

sortable.js:1290

fires when an element is about to be removed from all sortables

Properties:
Name Type Description
element HTMLElement

removed
sortable Sortable

where element was dragged from

maximum-remove

sortable.js:1255

fires when an element is removed because maximum was reached for the sortable

Properties:
Name Type Description
element HTMLElement

removed
sortable Sortable

where element was dragged from

maximum-remove-pending

sortable.js:1311

fires when an element is about to be removed because maximum was reached for the sortable

Properties:
Name Type Description
element HTMLElement

removed
sortable Sortable

where element was dragged from

order

sortable.js:1213

fires when a sortable is reordered

Properties:
Name Type Description
element HTMLElement

that was reordered
sortable Sortable

where element was placed

order-pending

sortable.js:1262

fires when order was changed but element was not dropped yet

Properties:
Name Type Description
element HTMLElement

being dragged
current Sortable

sortable with element placeholder

pickup

sortable.js:1206

fires when an element is picked up because it was moved beyond the options.threshold

Properties:
Name Type Description
element HTMLElement

being dragged
current Sortable

sortable with element placeholder

remove

sortable.js:1227

fires when an element is removed from this sortable

Properties:
Name Type Description
element HTMLElement

removed
sortable Sortable

where element was removed

remove-pending

sortable.js:1276

fires when element is removed but not dropped yet

Properties:
Name Type Description
element HTMLElement

being dragged
current Sortable

sortable with element placeholder

update

sortable.js:1248

fires when the sortable is updated with an add, remove, or order change

Properties:
Name Type Description
element HTMLElement

changed
sortable Sortable

with element

update-pending

sortable.js:1297

fires when an element is added, removed, or reorder but element has not dropped yet

Properties:
Name Type Description
element HTMLElement

being dragged
current Sortable

sortable with element placeholder