jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
1,642 lines • 77.5 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../../../../Styles/jqx.apireference.css" type="text/css" />
<script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../../scripts/documentation.js"></script>
<meta name="keywords" content="jQuery, Sortable, jqxSortable, Sortable plugin" />
<meta name="description" content="This page represents the help documentation of the jqxSortable plugin." />
<title>jqxSortable API Reference</title>
<script type="text/javascript">
$(document).ready(function () {
$(".documentation-option-type-click").click(function (event) {
$(event.target).parents('tr').next().find(".property-content").toggle();
});
});
</script>
</head>
<body>
<div id="properties">
<h2 class="documentation-top-header">
Properties
</h2>
<table class="documentation-table">
<tr>
<th>
Name
</th>
<th>
Type
</th>
<th>
Default
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span13'>appendTo</span>
</td>
<td>
<span>String</span>
</td>
<td>
'parent'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Defines where the helper that moves with the mouse is being appended to during the drag (for example, to resolve overlap/zIndex issues).
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>appendTo</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({appendTo: 'document.body'});</code></pre>
<p>
Get the <code>appendTo</code> property.
</p>
<pre><code>var appendTo = $('#jqxSortable').jqxSortable('appendTo'); </code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-appendto-property">appendTo is set to 'document.body'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span5'>axis</span>
</td>
<td>
<span>String/Number</span>
</td>
<td>
null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
If defined, the items can be dragged only horizontally or vertically.
</p>
<b>Possible Values:</b>
<br />
<pre><code>'x'</code></pre>
<pre><code>'y'</code></pre>
<h4>
Code examples
</h4>
<p>
Set the <code>axis</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({axis: 'y'});</code></pre>
<p>
Get the <code>axis</code> property.
</p>
<pre><code>var axis = $('#jqxSortable').jqxSortable('axis'); </code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-axis-property">axis is set to 'y'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span2'>cancel</span>
</td>
<td>
<span>String</span>
</td>
<td>
'input,textarea,button,select,option'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Prevents sorting if you start on elements matching the selector.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>cancel</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({ cancel: '.not-sortable-item'}); </code></pre>
<p>
Get the <code>cancel</code> property.
</p>
<pre><code>var cancel = $('#jqxSortable').jqxSortable('cancel'); </code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-cancel-property">cancel is set to '.not-sortable-item'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span8'>connectWith</span>
</td>
<td>
<span>String/Boolean</span>
</td>
<td>
true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
A selector of other sortable elements that the items from this list should be connected to.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>connectWith</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({ connectWith: '#sortable1, #sortable2' }); </code></pre>
<p>
Get the <code>connectWith</code> property.
</p>
<pre><code>var connectWith = $('#jqxSortable').jqxSortable('connectWith'); </code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-connectwith-property">connectWith is set to '#sortable1, #sortable2'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span63'>containment</span>
</td>
<td>
<span>String/Boolean</span>
</td>
<td>
false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Defines a bounding box that the sortable items are constrained to while dragging.
</p>
<h4>
Code example
</h4>
<p>
Set the <code>containment</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({containment : '.sortable-container'}); </code></pre>
<p>
Get the <code>containment</code> property.
</p>
<pre><code>var containment = $('#jqxSortable').jqxSortable('containment'); </code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-containment-property">containment is set to '.sortable-container'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span1'>cursor</span>
</td>
<td>
<span>String</span>
</td>
<td>
'auto'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Defines the cursor that is being shown while sorting.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>cursor</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({cursor: 'move'});</code></pre>
<p>
Get the <code>cursor</code> property.
</p>
<pre><code>var cursor = $('#jqxSortable').jqxSortable('cursor');</code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-cursor-property">cursor is set to 'move'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span3'>cursorAt</span>
</td>
<td>
<span>Object</span>
</td>
<td>
false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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 }.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>initContent</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({ cursorAt: { left: 5, top:5 } }); </code></pre>
<p>
Get the <code>cursorAt</code> property.
</p>
<pre><code>var cursorAt = $('#jqxSortable').jqxSortable('cursorAt'); </code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-cursorat-property">cursorAt is set to { left: 5, top:5 }</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span3'>delay</span>
</td>
<td>
<span>Number</span>
</td>
<td>
0
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Time in milliseconds to define when the sorting should start. Adding a delay helps preventing unwanted drags when clicking on an element.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>delay</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({ delay: 500 }); </code></pre>
<p>
Get the <code>delay</code> property.
</p>
<pre><code>var delay = $('#jqxSortable').jqxSortable('delay'); </code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-delay-property">delay is set to 500</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span12'>disabled</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>
false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Disables the widget if set to true.</p>
<h4>
Code example
</h4>
<p>
Set the <code>disabled</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({disabled : true}); </code></pre>
<p>
Get the <code>disabled</code> property.
</p>
<pre><code>var disabled = $('#jqxSortable').jqxSortable('disabled'); </code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-disabled-property">disabled is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span4'>distance</span>
</td>
<td>
<span>Number</span>
</td>
<td>
1
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>distance</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({distance: 10});</code></pre>
<p>
Get the <code>distance</code> property.
</p>
<pre><code>var distance = $('#jqxSortable').jqxSortable('distance'); </code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-distance-property">distance is set to 10</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span51'>dropOnEmpty</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>
true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>If false, items from this sortable can't be dropped on an empty connect sortable.</p>
<h4>
Code example
</h4>
<p>
Set the <code>dropOnEmpty</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({dropOnEmpty : false}); </code></pre>
<p>
Get the <code>dropOnEmpty</code> property.
</p>
<pre><code>var dropOnEmpty = $('#jqxSortable').jqxSortable('dropOnEmpty'); </code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-droponempty-property">dropOnEmpty is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span16'>forceHelperSize</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>
false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
If true, forces the helper to have a size.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>forceHelperSize</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({ forceHelperSize: true }); </code></pre>
<p>
Get the <code>forceHelperSize</code> property.
</p>
<pre><code>var forceHelperSize = $('#jqxSortable').jqxSortable('forceHelperSize'); </code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-forcehelpersize-property">forceHelperSize is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span3'>forcePlaceholderSize</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>
false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the displaying of the popover's arrow.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>forcePlaceholderSize</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({ forcePlaceholderSize: true }); </code></pre>
<p>
Get the <code>forcePlaceholderSize</code> property.
</p>
<pre><code>var forcePlaceholderSize = $('#jqxSortable').jqxSortable('forcePlaceholderSize'); </code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-forceplaceholdersize-property">forcePlaceholderSize is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span11'>grid</span>
</td>
<td>
<span>Array</span>
</td>
<td>
false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Snaps the sorting element or helper to a grid, every x and y pixels.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>grid</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({ "grid", [ 50, 50 ] }); </code></pre>
<p>
Get the <code>grid</code> property.
</p>
<pre><code>var grid = $('#jqxSortable').jqxSortable('grid'); </code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-grid-property">grid is set to [ 50, 50 ]</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span14'>handle</span>
</td>
<td>
<span>String/Boolean</span>
</td>
<td>
false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Restricts sort start click to the specified element.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>handle</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({handle:'.handle'});</code></pre>
<p>
Get the <code>handle</code> property.
</p>
<pre><code>var handle = $('#jqxSortable').jqxSortable('handle');</code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-handle-property">handle is set to '.handle'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span7'>helper</span>
</td>
<td>
<span>String/Function</span>
</td>
<td>
'original'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Allows for a helper element to be used for dragging display.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>helper</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({helper: 'clone'});</code></pre>
<p>
Get the <code>helper</code> property.
</p>
<pre><code>var helper = $('#jqxSortable').jqxSortable('helper');</code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-helper-property">helper is set to 'clone'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span7'>items</span>
</td>
<td>
<span>String</span>
</td>
<td>
'> *'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Specifies which items inside the element should be sortable.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>items</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({items: '> div.sortable-item'});</code></pre>
<p>
Get the <code>items</code> property.
</p>
<pre><code>var items = $('#jqxSortable').jqxSortable('items');</code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-items-property">items is set to '> div.sortable-item'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span7'>opacity</span>
</td>
<td>
<span>Number/Boolean</span>
</td>
<td>
false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Defines the opacity of the helper while sorting. From 0.01 to 1.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>opacity</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({opacity: 0.5});</code></pre>
<p>
Get the <code>opacity</code> property.
</p>
<pre><code>var opacity = $('#jqxSortable').jqxSortable('opacity');</code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-opacity-property">opacity is set to 0.5</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span7'>placeholderShow</span>
</td>
<td>
<span>String/Boolean</span>
</td>
<td>
"original"
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
A class name that gets applied to the otherwise white space.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>placeholderShow</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({placeholderShow: 'sortable-placeholder'});</code></pre>
<p>
Get the <code>placeholderShow</code> property.
</p>
<pre><code>var placeholder = $('#jqxSortable').jqxSortable('placeholderShow');</code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-placeholdershow-property">placeholderShow is set to 'sortable-placeholder'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span7'>revert</span>
</td>
<td>
<span>Boolean/Number</span>
</td>
<td>
false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Whether the sortable items should revert to their new positions using a smooth animation.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>revert</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({revert: 300});</code></pre>
<p>
Get the <code>revert</code> property.
</p>
<pre><code>var revert = $('#jqxSortable').jqxSortable('revert');</code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-revert-property">revert is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span7'>scroll</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>
true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
If set to true, the page scrolls when coming to an edge.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>scroll</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({scroll: false});</code></pre>
<p>
Get the <code>scroll</code> property.
</p>
<pre><code>var scroll = $('#jqxSortable').jqxSortable('scroll');</code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-scroll-property">scroll is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span7'>scrollSensitivity</span>
</td>
<td>
<span>Number</span>
</td>
<td>
20
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Defines how near the mouse must be to an edge to start scrolling.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>scrollSensitivity</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({scrollSensitivity: 10});</code></pre>
<p>
Get the <code>scrollSensitivity</code> property.
</p>
<pre><code>var scrollSensitivity = $('#jqxSortable').jqxSortable('scrollSensitivity');</code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-scrollsensitivity-property">scrollSensitivity is set to 10</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span7'>scrollSpeed</span>
</td>
<td>
<span>Number</span>
</td>
<td>
20
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Allows for a helper element to be used for dragging display.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>scrollSpeed</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({scrollSpeed: 10});</code></pre>
<p>
Get the <code>scrollSpeed</code> property.
</p>
<pre><code>var scrollSpeed = $('#jqxSortable').jqxSortable('scrollSpeed');</code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-scrollspeed-property">scrollSpeed is set to 40</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span7'>tolerance</span>
</td>
<td>
<span>String/Function</span>
</td>
<td>
'intersect'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Specifies which mode to use for testing whether the item being moved is hovering over another item.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>tolerance</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({tolerance: 'pointer'});</code></pre>
<p>
Get the <code>tolerance</code> property.
</p>
<pre><code>var tolerance = $('#jqxSortable').jqxSortable('tolerance');</code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-tolerance-property">tolerance is set to 'pointer'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span7'>zIndex</span>
</td>
<td>
<span>Number</span>
</td>
<td>
1000
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Allows for a helper element to be used for dragging display.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>zIndex</code> property.
</p>
<pre><code>$('#jqxSortable').jqxSortable({zIndex: 9999});</code></pre>
<p>
Get the <code>zIndex</code> property.
</p>
<pre><code>var zIndex = $('#jqxSortable').jqxSortable('zIndex');</code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-zindex-property">zIndex is set to 9999</a>
</div>
</div>
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<h2 class="documentation-top-header">
Events
</h2>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span6'>activate</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered on drag start when are used connected lists.
</p>
<h4>
Code examples
</h4>
<p>
Bind to the <code>activate</code> event by type: jqxSortable.
</p>
<pre><code>$('.jqxSortable').on('activate', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-events">Bind to the activate event by type: jqxSortable.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>beforeStop</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when sorting stops, but when the placeholder/helper is still available.
</p>
<h4>
Code examples
</h4>
<p>
Bind to the <code>beforeStop</code> event by type: jqxSortable.
</p>
<pre><code>$('#jqxSortable').on('beforeStop', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-events">Bind to the beforeStop event by type: jqxSortable.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>change</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the DOM position of an item is changed.
</p>
<h4>
Code examples
</h4>
<p>
Bind to the <code>change</code> event by type: jqxSortable.
</p>
<pre><code>$('#jqxSortable').on('change', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-events">Bind to the change event by type: jqxSortable.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>create</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the sortable is created.
</p>
<h4>
Code examples
</h4>
<p>
Bind to the <code>create</code> event by type: jqxSortable.
</p>
<pre><code>$('#jqxSortable').on('create', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-events">Bind to the create event by type: jqxSortable.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>deactivate</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when sorting was stopped, is propagated to all possible connected lists.
</p>
<h4>
Code examples
</h4>
<p>
Bind to the <code>deactivate</code> event by type: jqxSortable.
</p>
<pre><code>$('#jqxSortable').on('deactivate', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-events">Bind to the deactivate event by type: jqxSortable.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>out</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when a sortable item is moved away from a sortable list.
</p>
<h4>
Code examples
</h4>
<p>
Bind to the <code>out</code> event by type: jqxSortable.
</p>
<pre><code>$('#jqxSortable').on('out', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-events">Bind to the out event by type: jqxSortable.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>over</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when a sortable item is moved into a sortable list.
</p>
<h4>
Code examples
</h4>
<p>
Bind to the <code>over</code> event by type: jqxSortable.
</p>
<pre><code>$('#jqxSortable').on('over', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-events">Bind to the over event by type: jqxSortable.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>receive</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when an item from a connected sortable list has been dropped into another list.
</p>
<h4>
Code examples
</h4>
<p>
Bind to the <code>receive</code> event by type: jqxSortable.
</p>
<pre><code>$('#jqxSortable').on('receive', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-events">Bind to the receive event by type: jqxSortable.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>remove</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when a sortable item from the list has been dropped into another.
</p>
<h4>
Code examples
</h4>
<p>
Bind to the <code>remove</code> event by type: jqxSortable.
</p>
<pre><code>$('#jqxSortable').on('remove', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-events">Bind to the remove event by type: jqxSortable.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>sort</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered during sorting.
</p>
<h4>
Code examples
</h4>
<p>
Bind to the <code>sort</code> event by type: jqxSortable.
</p>
<pre><code>$('#jqxSortable').on('sort', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-events">Bind to the sort event by type: jqxSortable.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>start</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when sorting starts.
</p>
<h4>
Code examples
</h4>
<p>
Bind to the <code>start</code> event by type: jqxSortable.
</p>
<pre><code>$('#jqxSortable').on('start', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-events">Bind to the start event by type: jqxSortable.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>stop</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when sorting has stopped.
</p>
<h4>
Code examples
</h4>
<p>
Bind to the <code>stop</code> event by type: jqxSortable.
</p>
<pre><code>$('#jqxSortable').on('stop', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-events">Bind to the stop event by type: jqxSortable.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>update</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user stopped sorting and the DOM position has changed.
</p>
<h4>
Code examples
</h4>
<p>
Bind to the <code>update</code> event by type: jqxSortable.
</p>
<pre><code>$('#jqxSortable').on('update', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-events">Bind to the update event by type: jqxSortable.</a>
</div>
</div>
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<h2 class="documentation-top-header">
Methods
</h2>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span28'>cancel</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Cancels a change in the current sortable and reverts it to the state prior to when the current sort was started.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>
Code examples
</h4>
<p>
Invoke the <code>cancel</code> method.
</p>
<pre><code>$('#jqxSortable').jqxSortable('cancel'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-cancel-method">cancel the changes</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span9'>destroy</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Removes the sortable functionality.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>
Code examples
</h4>
<p>
Invoke the <code>destroy</code> method.
</p>
<pre><code>$('#jqxSortable').jqxSortable('destroy'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-destroy-method">destroy the widget</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span10'>disable</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Disables the widget.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>
Code examples
</h4>
<p>
Invoke the <code>disable</code> method.
</p>
<pre><code>$('#jqxSortable').jqxSortable('disable'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-disable-method">disable the widget</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span10'>enable</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enable the widget.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>
Code examples
</h4>
<p>
Invoke the <code>enable</code> method.
</p>
<pre><code>$('#jqxSortable').jqxSortable('enable'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-enable-method">enable the widget</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span10'>refresh</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Refresh the items.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>
Code examples
</h4>
<p>
Invoke the <code>refresh</code> method.
</p>
<pre><code>$('#jqxSortable').jqxSortable('refresh'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-refresh-method">refresh the items</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span10'>refreshPositions</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Refresh the cached positions of the sortable items.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>
Code examples
</h4>
<p>
Invoke the <code>refreshPositions</code> method.
</p>
<pre><code>$('#jqxSortable').jqxSortable('refreshPositions'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-refreshpositions-method">refresh the positions of the items</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span10'>serialize</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>
Code examples
</h4>
<p>
Invoke the <code>serialize</code> method.
</p>
<pre><code>$('#jqxSortable').jqxSortable('serialize'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-serialize-method">serialize the items</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span10'>toArray</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Serializes the jqxSortable item ids into an array of strings.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>
Code examples
</h4>
<p>
Invoke the <code>toArray</code> method.
</p>
<pre><code>$('#jqxSortable').jqxSortable('toArray'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxsortable-toarray-method">serialize the id's</a>
</div>
</div>
</td>
</tr>
</table>
<br />
</div>
</body>
</html>