Defines where the helper that moves with the mouse is being appended to during the drag (for example, to resolve overlap/zIndex issues).

Code examples

Set the appendTo property.

$('#jqxSortable').jqxSortable({appendTo: 'document.body'});

Get the appendTo property.

var appendTo = $('#jqxSortable').jqxSortable('appendTo'); 

If defined, the items can be dragged only horizontally or vertically.

Possible Values:

'x'

'y'

Code examples

Set the axis property.

$('#jqxSortable').jqxSortable({axis: 'y'});

Get the axis property.

var axis = $('#jqxSortable').jqxSortable('axis'); 

Prevents sorting if you start on elements matching the selector.

Code examples

Set the cancel property.

$('#jqxSortable').jqxSortable({ cancel: '.not-sortable-item'}); 

Get the cancel property.

var cancel = $('#jqxSortable').jqxSortable('cancel'); 

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

Code examples

Set the connectWith property.

$('#jqxSortable').jqxSortable({ connectWith: '#sortable1, #sortable2' }); 

Get the connectWith property.

var connectWith = $('#jqxSortable').jqxSortable('connectWith'); 

Defines a bounding box that the sortable items are constrained to while dragging.

Code example

Set the containment property.

$('#jqxSortable').jqxSortable({containment : '.sortable-container'}); 

Get the containment property.

var containment = $('#jqxSortable').jqxSortable('containment'); 

Defines the cursor that is being shown while sorting.

Code examples

Set the cursor property.

$('#jqxSortable').jqxSortable({cursor: 'move'});

Get the cursor property.

var cursor = $('#jqxSortable').jqxSortable('cursor');

Moves the sorting element or helper so the cursor always appears to drag from the same position. Coordinates can be given as a hash using a combination of one or two keys: { top, left, right, bottom }.

Code examples

Set the initContent property.

$('#jqxSortable').jqxSortable({ cursorAt: { left: 5, top:5 } }); 

Get the cursorAt property.

var cursorAt = $('#jqxSortable').jqxSortable('cursorAt'); 

Time in milliseconds to define when the sorting should start. Adding a delay helps preventing unwanted drags when clicking on an element.

Code examples

Set the delay property.

$('#jqxSortable').jqxSortable({ delay: 500 }); 

Get the delay property.

var delay = $('#jqxSortable').jqxSortable('delay'); 

Disables the widget if set to true.

Code example

Set the disabled property.

$('#jqxSortable').jqxSortable({disabled : true}); 

Get the disabled property.

var disabled = $('#jqxSortable').jqxSortable('disabled'); 

Tolerance, in pixels, for when sorting should start. If specified, sorting will not start until after mouse is dragged beyond distance. Can be used to allow for clicks on elements within a handle.

Code examples

Set the distance property.

$('#jqxSortable').jqxSortable({distance: 10});

Get the distance property.

var distance = $('#jqxSortable').jqxSortable('distance'); 

If false, items from this sortable can't be dropped on an empty connect sortable.

Code example

Set the dropOnEmpty property.

$('#jqxSortable').jqxSortable({dropOnEmpty : false}); 

Get the dropOnEmpty property.

var dropOnEmpty = $('#jqxSortable').jqxSortable('dropOnEmpty'); 

If true, forces the helper to have a size.

Code examples

Set the forceHelperSize property.

$('#jqxSortable').jqxSortable({ forceHelperSize: true }); 

Get the forceHelperSize property.

var forceHelperSize = $('#jqxSortable').jqxSortable('forceHelperSize'); 

Sets or gets the displaying of the popover's arrow.

Code examples

Set the forcePlaceholderSize property.

$('#jqxSortable').jqxSortable({ forcePlaceholderSize: true }); 

Get the forcePlaceholderSize property.

var forcePlaceholderSize = $('#jqxSortable').jqxSortable('forcePlaceholderSize'); 

Snaps the sorting element or helper to a grid, every x and y pixels.

Code examples

Set the grid property.

$('#jqxSortable').jqxSortable({ "grid", [ 50, 50 ] }); 

Get the grid property.

var grid = $('#jqxSortable').jqxSortable('grid'); 

Restricts sort start click to the specified element.

Code examples

Set the handle property.

$('#jqxSortable').jqxSortable({handle:'.handle'});

Get the handle property.

var handle = $('#jqxSortable').jqxSortable('handle');

Allows for a helper element to be used for dragging display.

Code examples

Set the helper property.

$('#jqxSortable').jqxSortable({helper: 'clone'});

Get the helper property.

var helper = $('#jqxSortable').jqxSortable('helper');

Specifies which items inside the element should be sortable.

Code examples

Set the items property.

$('#jqxSortable').jqxSortable({items: '> div.sortable-item'});

Get the items property.

var items = $('#jqxSortable').jqxSortable('items');

Defines the opacity of the helper while sorting. From 0.01 to 1.

Code examples

Set the opacity property.

$('#jqxSortable').jqxSortable({opacity: 0.5});

Get the opacity property.

var opacity = $('#jqxSortable').jqxSortable('opacity');

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

Code examples

Set the placeholderShow property.

$('#jqxSortable').jqxSortable({placeholderShow: 'sortable-placeholder'});

Get the placeholderShow property.

var placeholder = $('#jqxSortable').jqxSortable('placeholderShow');

Whether the sortable items should revert to their new positions using a smooth animation.

Code examples

Set the revert property.

$('#jqxSortable').jqxSortable({revert: 300});

Get the revert property.

var revert = $('#jqxSortable').jqxSortable('revert');

If set to true, the page scrolls when coming to an edge.

Code examples

Set the scroll property.

$('#jqxSortable').jqxSortable({scroll: false});

Get the scroll property.

var scroll = $('#jqxSortable').jqxSortable('scroll');

Defines how near the mouse must be to an edge to start scrolling.

Code examples

Set the scrollSensitivity property.

$('#jqxSortable').jqxSortable({scrollSensitivity: 10});

Get the scrollSensitivity property.

var scrollSensitivity = $('#jqxSortable').jqxSortable('scrollSensitivity');

Allows for a helper element to be used for dragging display.

Code examples

Set the scrollSpeed property.

$('#jqxSortable').jqxSortable({scrollSpeed: 10});

Get the scrollSpeed property.

var scrollSpeed = $('#jqxSortable').jqxSortable('scrollSpeed');

Specifies which mode to use for testing whether the item being moved is hovering over another item.

Code examples

Set the tolerance property.

$('#jqxSortable').jqxSortable({tolerance: 'pointer'});

Get the tolerance property.

var tolerance = $('#jqxSortable').jqxSortable('tolerance');

Allows for a helper element to be used for dragging display.

Code examples

Set the zIndex property.

$('#jqxSortable').jqxSortable({zIndex: 9999});

Get the zIndex property.

var zIndex = $('#jqxSortable').jqxSortable('zIndex');

This event is triggered on drag start when are used connected lists.

Code examples

Bind to the activate event by type: jqxSortable.

$('.jqxSortable').on('activate', function () { // Some code here. }); 

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

Code examples

Bind to the beforeStop event by type: jqxSortable.

$('#jqxSortable').on('beforeStop', function () { // Some code here. }); 

This event is triggered when the DOM position of an item is changed.

Code examples

Bind to the change event by type: jqxSortable.

$('#jqxSortable').on('change', function () { // Some code here. }); 

This event is triggered when the sortable is created.

Code examples

Bind to the create event by type: jqxSortable.

$('#jqxSortable').on('create', function () { // Some code here. }); 

This event is triggered when sorting was stopped, is propagated to all possible connected lists.

Code examples

Bind to the deactivate event by type: jqxSortable.

$('#jqxSortable').on('deactivate', function () { // Some code here. }); 

This event is triggered when a sortable item is moved away from a sortable list.

Code examples

Bind to the out event by type: jqxSortable.

$('#jqxSortable').on('out', function () { // Some code here. }); 

This event is triggered when a sortable item is moved into a sortable list.

Code examples

Bind to the over event by type: jqxSortable.

$('#jqxSortable').on('over', function () { // Some code here. }); 

This event is triggered when an item from a connected sortable list has been dropped into another list.

Code examples

Bind to the receive event by type: jqxSortable.

$('#jqxSortable').on('receive', function () { // Some code here. }); 

This event is triggered when a sortable item from the list has been dropped into another.

Code examples

Bind to the remove event by type: jqxSortable.

$('#jqxSortable').on('remove', function () { // Some code here. }); 

This event is triggered during sorting.

Code examples

Bind to the sort event by type: jqxSortable.

$('#jqxSortable').on('sort', function () { // Some code here. }); 

This event is triggered when sorting starts.

Code examples

Bind to the start event by type: jqxSortable.

$('#jqxSortable').on('start', function () { // Some code here. }); 

This event is triggered when sorting has stopped.

Code examples

Bind to the stop event by type: jqxSortable.

$('#jqxSortable').on('stop', function () { // Some code here. }); 

This event is triggered when the user stopped sorting and the DOM position has changed.

Code examples

Bind to the update event by type: jqxSortable.

$('#jqxSortable').on('update', function () { // Some code here. }); 

Cancels a change in the current sortable and reverts it to the state prior to when the current sort was started.

Code examples

Invoke the cancel method.

$('#jqxSortable').jqxSortable('cancel'); 

Removes the sortable functionality.

Code examples

Invoke the destroy method.

$('#jqxSortable').jqxSortable('destroy'); 

Disables the widget.

Code examples

Invoke the disable method.

$('#jqxSortable').jqxSortable('disable'); 

Enable the widget.

Code examples

Invoke the enable method.

$('#jqxSortable').jqxSortable('enable'); 

Refresh the items.

Code examples

Invoke the refresh method.

$('#jqxSortable').jqxSortable('refresh'); 

Refresh the cached positions of the sortable items.

Code examples

Invoke the refreshPositions method.

$('#jqxSortable').jqxSortable('refreshPositions'); 

Serializes the jqxSortable 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.

Code examples

Invoke the serialize method.

$('#jqxSortable').jqxSortable('serialize'); 

Serializes the jqxSortable item ids into an array of strings.

Code examples

Invoke the toArray method.

$('#jqxSortable').jqxSortable('toArray');