Sortable

Item 1
Item 2
Item 3
Item 4

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Options

accept

Type: Selector or Function
Default: *

Controls which 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.

Selector Example

$('#list-accept-selector').sortable({ accept: '.a' })
.on('sortable:receive', function(e, ui) {
  ui.item.removeClass('draggable')
})
$('#example-accept-selector .draggable').draggable({ connectWith: '#list-accept-selector' })

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Function Example

$('#list-accept-function').sortable({ accept: function(el) { return el.hasClass('b') } })
.on('sortable:receive', function(e, ui) {
  ui.item.removeClass('draggable')
})
$('#example-accept-function .draggable').draggable({ connectWith: '#list-accept-function' })

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

activeClass

Type: String
Default: false

If specified, the class will be added to the sortable while an acceptable draggable is being dragged.

Example

$('#example-activeClass').sortable({ activeClass: 'active' })

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

cancel

Type: Selector
Default: input, textarea, button, select, option

Prevents sorting if you start on elements matching the selector.

Example

$('#example-cancel').sortable({ cancel: '.title' })

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

connectWith

Type: Selector
Default: false

A selector of other sortable or droppable elements that the items from this list should be connected to.

Example

$('#lhs').sortable({ connectWith: '#rhs' })
$('#rhs').sortable()

List A

List B

disabled

Type: Boolean
Default: false

Disables the sortable if set to true.

Example

$('#example-disabled').sortable({ disabled: true })

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

forcePlaceholderSize

Type: Boolean
Default: false

If true, forces the helper to have a size.

Example

$('#example-forcePlaceholderSize').sortable({
forcePlaceholderSize: true
})

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

handle

Type: Selector
Default: false

Restricts sort start click to the specified element.

Example

$('#example-handle').sortable({ handle: '.title' })

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

items

Type: Selector
Default: 'li, div'

Specifies which items inside the element should be sortable.

Example

$('#example-items').sortable({ items: 'li.task' })

jQuery's default is '> *', but it is currently not possible to use this children selector for event delegation in Zepto.

placeholder

Type: Selector
Default: 'placeholder'

A class name that gets applied to the otherwise white space.

Example

$('#example-placeholder').sortable({ placeholder: 'dummy' })

placeholderTag

Type: String
Default: null

This option could be used to manually set the HTML tag used to create the placeholder. If this option is not set, the HTML tag is detected automatically.

Example

$('#example-placeholder').sortable({ placeholderTag: 'section' })

updateHandler

Type: Function
Default: null

This function can be used to override the default update behavior.

receiveHandler

Type: Function
Default: null

This function can be used to override the default receive behavior.

Methods

destroy()

Removes the draggable functionality completely.

$('#example-destroy').sortable()
$('#example-destroy').sortable('destroy')

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

disable()

Disables the draggable.

$('#example-disable').sortable('disable')

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

enable()

Enables the draggable.

$('#example-enable').sortable('enable')

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

option()

Gets an object containing key/value pairs representing the current draggable options hash.

var options = $('#example-option').sortable('option')

option(optionName)

Gets the value currently associated with the specified optionName.

var isDisabled = $('#example-option').sortable('option', 'disabled')

option(optionName, value)

Sets the value of the sortable option associated with the specified optionName.

$('#example-option').sortable('option', 'disabled', true)

option(options)

Sets one or more options for the sortable.

$('#example-option').sortable('option', { disabled: true })

refresh()

New items ar recognized automatically.

toArray()

Serializes the sortable's item ids into a form/ajax submittable string. Calling this method produces a hash that can be appended to any url to easily submit a new item order back to the server.

It works by default by looking at the id of each item in the format "setname_number", and it spits out a hash like "setname[]=number&setname[]=number".

Options

attribute: The name of the attribute to use for the values. (Default: 'id')

var arr = $('#example-toArray').sortable('toArray', {
attribute: 'data-foobar'
})

Events

sortable:activate(event, ui)

Triggered when an accepted draggable starts dragging. Can be an item of the list itself or an item of a connect sortable or draggable.

ui.item: the element being dragged

Example

$(function() {
  $('#example-activate-a').sortable()
  .on('sortable:activate', function(e, ui) {
    $('#example-activate-result').append('✓')
  })
  $('#example-activate-b').sortable({ connectWith: '#example-activate-a' })
  $('.draggable.example-activate').draggable({ connectWith: '#example-activate-a' })
})

List A

List B

sortable:beforeStop(event, ui)

This event is triggered when sorting stops, but when the placeholder/helper is still available.

ui.item: the element being dragged

sortable:change(event, ui)

This event is triggered during sorting.

ui.item: the element being dragged

Example

$(function() {
  $('#example-change').sortable()
  .on('sortable:change', function() {
    $('#example-change-result').append('✓')
  })
})

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

sortable:create(event)

Triggered when the droppable is created.

sortable:deactivate(event, ui)

Triggered when an accepted draggable stops dragging. Can be an item of the list itself or an item of a connect sortable or draggable.

ui.item: the element being dragged

Example

$(function() {
  $('#example-deactivate-a').sortable()
  .on('sortable:deactivate', function(e, ui) {
    $('#example-deactivate-result').append('✓')
  })
  $('#example-deactivate-b').sortable({ connectWith: '#example-deactivate-a' })
  $('.draggable.example-deactivate').draggable({ connectWith: '#example-deactivate-a' })
})

List A

List B

sortable:receive(event, ui)

This event is triggered when a connected sortable list has received a draggable or an item from another list.

ui.item: the element being received

Example

$(function() {
  $('#example-receive-a').sortable()
  .on('sortable:receive', function(e, ui) {
    $('#example-receive-result').append('✓')
  })
  $('#example-receive-b').sortable({ connectWith: '#example-receive-a' })
  $('.draggable.example-receive').draggable({ connectWith: '#example-receive-a' })
})

List A

List B

sortable:start(event, ui)

This event is triggered when sorting starts.

ui.item: the element being dragged

sortable:stop(event, ui)

This event is triggered when sorting has stopped.

ui.item: the element being dragged

sortable:update(event, ui)

This event is triggered when the user stopped sorting.

ui.item: the element being dragged
index: the index the element element is dropped at

Example

$(function() {
  $('#example-update').sortable()
  .on('sortable:update', function() {
    $('#example-update-result').append('✓')
  })
})

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6