Draggable

Options

cancel

Type

Selector

Default

input, textarea, button, select, option

Prevents dragging from starting on specified elements.

Example

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

clone

Type

Boolean

Default

false

Multiple types supported:

Bool

Specifies whether the draggable should be cloned or not.

Function

A function that will be called and must return the element that will be used as dragging clone/helper.

Example

$('.draggable-clone').draggable({ clone: true })

Function Example

$('.draggable-cloneFn').draggable({
  clone: function() { return this.clone() }
})

cloneClass

Type

Boolean

Default

false

Specifies a class that will be added to cloned draggables.

Example

$('.draggable-cloneClass').draggable({ clone: true, cloneClass: 'clone' })

connectWith

Type

Selector

Default

false

Allows the draggable to be dropped onto the specified sortables. If this option is used, a draggable can be dropped onto a sortable list and then becomes part of it.

Example

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

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

• D
• D
• D

disabled

Type

Boolean

Default

false

Disables the draggable if set to true.

Example

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

handle

Type

Selector

Default

false

If specified, restricts dragging from starting to the specified element(s). Only elements that descend from the draggable element are permitted.

Example

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

scope

Type

String

Default

"default"

Used to group sets of draggable and droppable items, in addition to the accept option. A draggable with the same scope value as a droppable will be accepted.

Example

$('#example-scope').draggable({ scope: 'T' })

Methods

destroy()

Removes the draggable functionality completely.

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

disable()

Disables the draggable.

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

enable()

Enables the draggable.

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

option()

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

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

option(optionName)

Gets the value currently associated with the specified optionName.

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

option(optionName, value)

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

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

option(options)

Sets one or more options for the draggable.

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

Events

draggable:create(event)

Triggered when the droppable is created.

draggable:start(event, ui)

This event is triggered when dragging starts.

ui.item

the element being dragged

draggable:stop(event, ui)

This event is triggered when dragging has stopped.

ui.item

the element being dragged