testing/ver0.01/jquery-ui-1.10.3.custom/development-bundle/docs/sortable.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>jQuery UI sortable documentation</title>
   6
   7         <style>
   8         body {
   9                 font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"
  10         }
  11         .gutter {
  12                 display: none;
  13         }
  14         </style>
  15 </head>
  16 <body>
  17
  18 <script>{
  19                 "title":
  20                         "Sortable Widget",
  21                 "excerpt":
  22                         "Reorder elements in a list or grid using the mouse.",
  23                 "termSlugs": {
  24                         "category": [
  25                                 "interactions"
  26                         ]
  27                 }
  28         }</script><article id="sortable1" class="entry widget"><h2 class="section-title">
  29 <span>Sortable Widget</span><span class="version-details">version added: 1.0</span>
  30 </h2>
  31 <div class="entry-wrapper">
  32 <p class="desc"><strong>Description: </strong>Reorder elements in a list or grid using the mouse.</p>
  33 <section id="quick-nav"><header><h2>QuickNav<a href="#entry-examples">Examples</a>
  34 </h2></header><div class="quick-nav-section">
  35 <h3>Options</h3>
  36 <div><a href="#option-appendTo">appendTo</a></div>
  37 <div><a href="#option-axis">axis</a></div>
  38 <div><a href="#option-cancel">cancel</a></div>
  39 <div><a href="#option-connectWith">connectWith</a></div>
  40 <div><a href="#option-containment">containment</a></div>
  41 <div><a href="#option-cursor">cursor</a></div>
  42 <div><a href="#option-cursorAt">cursorAt</a></div>
  43 <div><a href="#option-delay">delay</a></div>
  44 <div><a href="#option-disabled">disabled</a></div>
  45 <div><a href="#option-distance">distance</a></div>
  46 <div><a href="#option-dropOnEmpty">dropOnEmpty</a></div>
  47 <div><a href="#option-forceHelperSize">forceHelperSize</a></div>
  48 <div><a href="#option-forcePlaceholderSize">forcePlaceholderSize</a></div>
  49 <div><a href="#option-grid">grid</a></div>
  50 <div><a href="#option-handle">handle</a></div>
  51 <div><a href="#option-helper">helper</a></div>
  52 <div><a href="#option-items">items</a></div>
  53 <div><a href="#option-opacity">opacity</a></div>
  54 <div><a href="#option-placeholder">placeholder</a></div>
  55 <div><a href="#option-revert">revert</a></div>
  56 <div><a href="#option-scroll">scroll</a></div>
  57 <div><a href="#option-scrollSensitivity">scrollSensitivity</a></div>
  58 <div><a href="#option-scrollSpeed">scrollSpeed</a></div>
  59 <div><a href="#option-tolerance">tolerance</a></div>
  60 <div><a href="#option-zIndex">zIndex</a></div>
  61 </div>
  62 <div class="quick-nav-section">
  63 <h3>Methods</h3>
  64 <div><a href="#method-cancel">cancel</a></div>
  65 <div><a href="#method-destroy">destroy</a></div>
  66 <div><a href="#method-disable">disable</a></div>
  67 <div><a href="#method-enable">enable</a></div>
  68 <div><a href="#method-option">option</a></div>
  69 <div><a href="#method-refresh">refresh</a></div>
  70 <div><a href="#method-refreshPositions">refreshPositions</a></div>
  71 <div><a href="#method-serialize">serialize</a></div>
  72 <div><a href="#method-toArray">toArray</a></div>
  73 <div><a href="#method-widget">widget</a></div>
  74 </div>
  75 <div class="quick-nav-section">
  76 <h3>Events</h3>
  77 <div><a href="#event-create">create</a></div>
  78 <div><a href="#event-start">start</a></div>
  79 <div><a href="#event-sort">sort</a></div>
  80 <div><a href="#event-change">change</a></div>
  81 <div><a href="#event-beforeStop">beforeStop</a></div>
  82 <div><a href="#event-stop">stop</a></div>
  83 <div><a href="#event-update">update</a></div>
  84 <div><a href="#event-receive">receive</a></div>
  85 <div><a href="#event-remove">remove</a></div>
  86 <div><a href="#event-over">over</a></div>
  87 <div><a href="#event-out">out</a></div>
  88 <div><a href="#event-activate">activate</a></div>
  89 <div><a href="#event-deactivate">deactivate</a></div>
  90 </div></section><div class="longdesc" id="entry-longdesc">
  91                 <p>The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse.</p>
  92                 <p><em>Note: In order to sort table rows, the <code>tbody</code> must be made sortable, not the <code>table</code>.</em></p>
  93         </div>
  94 <section id="options"><header><h2 class="underline">Options</h2></header><div id="option-appendTo" class="api-item first-item">
  95 <h3>appendTo<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#jQuery">jQuery</a> or <a href="http://api.jquery.com/Types#Element">Element</a> or <a href="http://api.jquery.com/Types#Selector">Selector</a> or <a href="http://api.jquery.com/Types#String">String</a></span>
  96 </h3>
  97 <div class="default">
  98 <strong>Default: </strong><code>"parent"</code>
  99 </div>
 100 <div>Defines where the helper that moves with the mouse is being appended to during the drag (for example, to resolve overlap/zIndex issues).</div>
 101 <strong>Multiple types supported:</strong><ul>
 102 <li>
 103 <strong>jQuery</strong>: A jQuery object containing the element to append the helper to.</li>
 104 <li>
 105 <strong>Element</strong>: The element to append the helper to.</li>
 106 <li>
 107 <strong>Selector</strong>: A selector specifying which element to append the helper to.</li>
 108 <li>
 109 <strong>String</strong>: The string <code>"parent"</code> will cause the helper to be a sibling of the sortable item.</li>
 110 </ul>
 111 <strong>Code examples:</strong><p>Initialize the sortable with the appendTo option specified:</p>
 112 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ appendTo: document.body });</code></div></div></td></tr></tbody></table></div>
 113 <p>Get or set the appendTo option, after initialization:</p>
 114 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">appendTo = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"appendTo"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"appendTo"</code><code class="plain">, document.body );</code></div></div></td></tr></tbody></table></div>
 115 </div>
 116 <div id="option-axis" class="api-item">
 117 <h3>axis<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
 118 </h3>
 119 <div class="default">
 120 <strong>Default: </strong><code>false</code>
 121 </div>
 122 <div>If defined, the items can be dragged only horizontally or vertically. Possible values: <code>"x"</code>, <code>"y"</code>.</div>
 123 <strong>Code examples:</strong><p>Initialize the sortable with the axis option specified:</p>
 124 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ axis: </code><code class="string">"x"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 125 <p>Get or set the axis option, after initialization:</p>
 126 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">axis = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"axis"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"axis"</code><code class="plain">, </code><code class="string">"x"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 127 </div>
 128 <div id="option-cancel" class="api-item">
 129 <h3>cancel<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Selector">Selector</a></span>
 130 </h3>
 131 <div class="default">
 132 <strong>Default: </strong><code>":input,button"</code>
 133 </div>
 134 <div>Prevents sorting if you start on elements matching the selector.</div>
 135 <strong>Code examples:</strong><p>Initialize the sortable with the cancel option specified:</p>
 136 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ cancel: </code><code class="string">"a,button"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 137 <p>Get or set the cancel option, after initialization:</p>
 138 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">cancel = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"cancel"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"cancel"</code><code class="plain">, </code><code class="string">"a,button"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 139 </div>
 140 <div id="option-connectWith" class="api-item">
 141 <h3>connectWith<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Selector">Selector</a></span>
 142 </h3>
 143 <div class="default">
 144 <strong>Default: </strong><code>false</code>
 145 </div>
 146 <div>A selector of other sortable elements that the items from this list should be connected to. This is a one-way relationship, if you want the items to be connected in both directions, the <code>connectWith</code> option must be set on both sortable elements.</div>
 147 <strong>Code examples:</strong><p>Initialize the sortable with the connectWith option specified:</p>
 148 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ connectWith: </code><code class="string">"#shopping-cart"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 149 <p>Get or set the connectWith option, after initialization:</p>
 150 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">connectWith = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"connectWith"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"connectWith"</code><code class="plain">, </code><code class="string">"#shopping-cart"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 151 </div>
 152 <div id="option-containment" class="api-item">
 153 <h3>containment<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Element">Element</a> or <a href="http://api.jquery.com/Types#Selector">Selector</a> or <a href="http://api.jquery.com/Types#String">String</a></span>
 154 </h3>
 155 <div class="default">
 156 <strong>Default: </strong><code>false</code>
 157 </div>
 158 <div>
 159                                 <p>Defines a bounding box that the sortable items are contrained to while dragging.</p>
 160
 161                                 <p>Note: The element specified for containment must have a calculated width and height (though it need not be explicit). For example, if you have <code>float: left</code> sortable children and specify <code>containment: "parent"</code> be sure to have <code>float: left</code> on the sortable/parent container as well or it will have <code>height: 0</code>, causing undefined behavior.</p>
 162                         </div>
 163 <strong>Multiple types supported:</strong><ul>
 164 <li>
 165 <strong>Element</strong>: An element to use as the container.</li>
 166 <li>
 167 <strong>Selector</strong>: A selector specifying an element to use as the container.</li>
 168 <li>
 169 <strong>String</strong>: A string identifying an element to use as the container. Possible values: <code>"parent"</code>, <code>"document"</code>, <code>"window"</code>.</li>
 170 </ul>
 171 <strong>Code examples:</strong><p>Initialize the sortable with the containment option specified:</p>
 172 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ containment: </code><code class="string">"parent"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 173 <p>Get or set the containment option, after initialization:</p>
 174 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">containment = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"containment"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"containment"</code><code class="plain">, </code><code class="string">"parent"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 175 </div>
 176 <div id="option-cursor" class="api-item">
 177 <h3>cursor<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
 178 </h3>
 179 <div class="default">
 180 <strong>Default: </strong><code>"auto"</code>
 181 </div>
 182 <div>Defines the cursor that is being shown while sorting.</div>
 183 <strong>Code examples:</strong><p>Initialize the sortable with the cursor option specified:</p>
 184 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ cursor: </code><code class="string">"move"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 185 <p>Get or set the cursor option, after initialization:</p>
 186 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">cursor = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"cursor"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"cursor"</code><code class="plain">, </code><code class="string">"move"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 187 </div>
 188 <div id="option-cursorAt" class="api-item">
 189 <h3>cursorAt<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Object">Object</a></span>
 190 </h3>
 191 <div class="default">
 192 <strong>Default: </strong><code>false</code>
 193 </div>
 194 <div>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: <code>{ top, left, right, bottom }</code>.</div>
 195 <strong>Code examples:</strong><p>Initialize the sortable with the cursorAt option specified:</p>
 196 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ cursorAt: { left: 5 } });</code></div></div></td></tr></tbody></table></div>
 197 <p>Get or set the cursorAt option, after initialization:</p>
 198 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">cursorAt = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"cursorAt"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"cursorAt"</code><code class="plain">, { left: 5 } );</code></div></div></td></tr></tbody></table></div>
 199 </div>
 200 <div id="option-delay" class="api-item">
 201 <h3>delay<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Integer">Integer</a></span>
 202 </h3>
 203 <div class="default">
 204 <strong>Default: </strong><code>0</code>
 205 </div>
 206 <div>Time in milliseconds to define when the sorting should start. Adding a delay helps preventing unwanted drags when clicking on an element.</div>
 207 <strong>Code examples:</strong><p>Initialize the sortable with the delay option specified:</p>
 208 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ delay: 150 });</code></div></div></td></tr></tbody></table></div>
 209 <p>Get or set the delay option, after initialization:</p>
 210 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">delay = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"delay"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"delay"</code><code class="plain">, 150 );</code></div></div></td></tr></tbody></table></div>
 211 </div>
 212 <div id="option-disabled" class="api-item">
 213 <h3>disabled<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
 214 </h3>
 215 <div class="default">
 216 <strong>Default: </strong><code>false</code>
 217 </div>
 218 <div>Disables the sortable if set to <code>true</code>.</div>
 219 <strong>Code examples:</strong><p>Initialize the sortable with the disabled option specified:</p>
 220 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ disabled: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 221 <p>Get or set the disabled option, after initialization:</p>
 222 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">disabled = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 223 </div>
 224 <div id="option-distance" class="api-item">
 225 <h3>distance<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
 226 </h3>
 227 <div class="default">
 228 <strong>Default: </strong><code>1</code>
 229 </div>
 230 <div>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.</div>
 231 <strong>Code examples:</strong><p>Initialize the sortable with the distance option specified:</p>
 232 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ distance: 5 });</code></div></div></td></tr></tbody></table></div>
 233 <p>Get or set the distance option, after initialization:</p>
 234 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">distance = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"distance"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"distance"</code><code class="plain">, 5 );</code></div></div></td></tr></tbody></table></div>
 235 </div>
 236 <div id="option-dropOnEmpty" class="api-item">
 237 <h3>dropOnEmpty<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
 238 </h3>
 239 <div class="default">
 240 <strong>Default: </strong><code>true</code>
 241 </div>
 242 <div>If <code>false</code>, items from this sortable can't be dropped on an empty connect sortable (see the <a href="#option-connectWith"><code>connectWith</code></a> option.</div>
 243 <strong>Code examples:</strong><p>Initialize the sortable with the dropOnEmpty option specified:</p>
 244 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ dropOnEmpty: </code><code class="keyword">false</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 245 <p>Get or set the dropOnEmpty option, after initialization:</p>
 246 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">dropOnEmpty = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"dropOnEmpty"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"dropOnEmpty"</code><code class="plain">, </code><code class="keyword">false</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 247 </div>
 248 <div id="option-forceHelperSize" class="api-item">
 249 <h3>forceHelperSize<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
 250 </h3>
 251 <div class="default">
 252 <strong>Default: </strong><code>false</code>
 253 </div>
 254 <div>If <code>true</code>, forces the helper to have a size.</div>
 255 <strong>Code examples:</strong><p>Initialize the sortable with the forceHelperSize option specified:</p>
 256 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ forceHelperSize: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 257 <p>Get or set the forceHelperSize option, after initialization:</p>
 258 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">forceHelperSize = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"forceHelperSize"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"forceHelperSize"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 259 </div>
 260 <div id="option-forcePlaceholderSize" class="api-item">
 261 <h3>forcePlaceholderSize<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
 262 </h3>
 263 <div class="default">
 264 <strong>Default: </strong><code>false</code>
 265 </div>
 266 <div>If true, forces the placeholder to have a size.</div>
 267 <strong>Code examples:</strong><p>Initialize the sortable with the forcePlaceholderSize option specified:</p>
 268 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ forcePlaceholderSize: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 269 <p>Get or set the forcePlaceholderSize option, after initialization:</p>
 270 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">forcePlaceholderSize = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"forcePlaceholderSize"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"forcePlaceholderSize"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 271 </div>
 272 <div id="option-grid" class="api-item">
 273 <h3>grid<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Array">Array</a></span>
 274 </h3>
 275 <div class="default">
 276 <strong>Default: </strong><code>false</code>
 277 </div>
 278 <div>Snaps the sorting element or helper to a grid, every x and y pixels. Array values: <code>[ x, y ]</code>.</div>
 279 <strong>Code examples:</strong><p>Initialize the sortable with the grid option specified:</p>
 280 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ grid: [ 20, 10 ] });</code></div></div></td></tr></tbody></table></div>
 281 <p>Get or set the grid option, after initialization:</p>
 282 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">grid = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"grid"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"grid"</code><code class="plain">, [ 20, 10 ] );</code></div></div></td></tr></tbody></table></div>
 283 </div>
 284 <div id="option-handle" class="api-item">
 285 <h3>handle<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Selector">Selector</a> or <a href="http://api.jquery.com/Types#Element">Element</a></span>
 286 </h3>
 287 <div class="default">
 288 <strong>Default: </strong><code>false</code>
 289 </div>
 290 <div>Restricts sort start click to the specified element.</div>
 291 <strong>Code examples:</strong><p>Initialize the sortable with the handle option specified:</p>
 292 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ handle: </code><code class="string">".handle"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 293 <p>Get or set the handle option, after initialization:</p>
 294 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">handle = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"handle"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"handle"</code><code class="plain">, </code><code class="string">".handle"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 295 </div>
 296 <div id="option-helper" class="api-item">
 297 <h3>helper<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a> or <a href="http://api.jquery.com/Types/#Function">Function</a>()</span>
 298 </h3>
 299 <div class="default">
 300 <strong>Default: </strong><code>"original"</code>
 301 </div>
 302 <div>Allows for a helper element to be used for dragging display.</div>
 303 <strong>Multiple types supported:</strong><ul>
 304 <li>
 305 <strong>String</strong>: If set to <code>"clone"</code>, then the element will be cloned and the clone will be dragged.</li>
 306 <li>
 307 <strong>Function</strong>: A function that will return a DOMElement to use while dragging. The function receives the event and the element being sorted.</li>
 308 </ul>
 309 <strong>Code examples:</strong><p>Initialize the sortable with the helper option specified:</p>
 310 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ helper: </code><code class="string">"clone"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 311 <p>Get or set the helper option, after initialization:</p>
 312 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">helper = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"helper"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"helper"</code><code class="plain">, </code><code class="string">"clone"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 313 </div>
 314 <div id="option-items" class="api-item">
 315 <h3>items<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Selector">Selector</a></span>
 316 </h3>
 317 <div class="default">
 318 <strong>Default: </strong><code>"&gt; *"</code>
 319 </div>
 320 <div>Specifies which items inside the element should be sortable.</div>
 321 <strong>Code examples:</strong><p>Initialize the sortable with the items option specified:</p>
 322 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ items: </code><code class="string">"&gt; li"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 323 <p>Get or set the items option, after initialization:</p>
 324 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">items = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"items"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"items"</code><code class="plain">, </code><code class="string">"&gt; li"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 325 </div>
 326 <div id="option-opacity" class="api-item">
 327 <h3>opacity<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
 328 </h3>
 329 <div class="default">
 330 <strong>Default: </strong><code>false</code>
 331 </div>
 332 <div>Defines the opacity of the helper while sorting. From <code>0.01</code> to <code>1</code>.</div>
 333 <strong>Code examples:</strong><p>Initialize the sortable with the opacity option specified:</p>
 334 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ opacity: 0.5 });</code></div></div></td></tr></tbody></table></div>
 335 <p>Get or set the opacity option, after initialization:</p>
 336 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">opacity = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"opacity"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"opacity"</code><code class="plain">, 0.5 );</code></div></div></td></tr></tbody></table></div>
 337 </div>
 338 <div id="option-placeholder" class="api-item">
 339 <h3>placeholder<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
 340 </h3>
 341 <div class="default">
 342 <strong>Default: </strong><code>false</code>
 343 </div>
 344 <div>A class name that gets applied to the otherwise white space.</div>
 345 <strong>Code examples:</strong><p>Initialize the sortable with the placeholder option specified:</p>
 346 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ placeholder: </code><code class="string">"sortable-placeholder"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 347 <p>Get or set the placeholder option, after initialization:</p>
 348 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">placeholder = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"placeholder"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"placeholder"</code><code class="plain">, </code><code class="string">"sortable-placeholder"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 349 </div>
 350 <div id="option-revert" class="api-item">
 351 <h3>revert<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a> or <a href="http://api.jquery.com/Types#Number">Number</a></span>
 352 </h3>
 353 <div class="default">
 354 <strong>Default: </strong><code>false</code>
 355 </div>
 356 <div>Whether the sortable items should revert to their new positions using a smooth animation.</div>
 357 <strong>Multiple types supported:</strong><ul>
 358 <li>
 359 <strong>Boolean</strong>: When set to <code>true</code>, the items will animate with the default duration.</li>
 360 <li>
 361 <strong>Number</strong>: The duration for the animation, in milliseconds.</li>
 362 </ul>
 363 <strong>Code examples:</strong><p>Initialize the sortable with the revert option specified:</p>
 364 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ revert: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 365 <p>Get or set the revert option, after initialization:</p>
 366 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">revert = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"revert"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"revert"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 367 </div>
 368 <div id="option-scroll" class="api-item">
 369 <h3>scroll<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
 370 </h3>
 371 <div class="default">
 372 <strong>Default: </strong><code>true</code>
 373 </div>
 374 <div>If set to true, the page scrolls when coming to an edge.</div>
 375 <strong>Code examples:</strong><p>Initialize the sortable with the scroll option specified:</p>
 376 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ scroll: </code><code class="keyword">false</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 377 <p>Get or set the scroll option, after initialization:</p>
 378 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">scroll = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"scroll"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"scroll"</code><code class="plain">, </code><code class="keyword">false</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 379 </div>
 380 <div id="option-scrollSensitivity" class="api-item">
 381 <h3>scrollSensitivity<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
 382 </h3>
 383 <div class="default">
 384 <strong>Default: </strong><code>20</code>
 385 </div>
 386 <div>Defines how near the mouse must be to an edge to start scrolling.</div>
 387 <strong>Code examples:</strong><p>Initialize the sortable with the scrollSensitivity option specified:</p>
 388 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ scrollSensitivity: 10 });</code></div></div></td></tr></tbody></table></div>
 389 <p>Get or set the scrollSensitivity option, after initialization:</p>
 390 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">scrollSensitivity = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"scrollSensitivity"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"scrollSensitivity"</code><code class="plain">, 10 );</code></div></div></td></tr></tbody></table></div>
 391 </div>
 392 <div id="option-scrollSpeed" class="api-item">
 393 <h3>scrollSpeed<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
 394 </h3>
 395 <div class="default">
 396 <strong>Default: </strong><code>20</code>
 397 </div>
 398 <div>The speed at which the window should scroll once the mouse pointer gets within the <a href="#option-scrollSensitivity"><code>scrollSensitivity</code></a> distance.</div>
 399 <strong>Code examples:</strong><p>Initialize the sortable with the scrollSpeed option specified:</p>
 400 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ scrollSpeed: 40 });</code></div></div></td></tr></tbody></table></div>
 401 <p>Get or set the scrollSpeed option, after initialization:</p>
 402 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">scrollSpeed = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"scrollSpeed"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"scrollSpeed"</code><code class="plain">, 40 );</code></div></div></td></tr></tbody></table></div>
 403 </div>
 404 <div id="option-tolerance" class="api-item">
 405 <h3>tolerance<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
 406 </h3>
 407 <div class="default">
 408 <strong>Default: </strong><code>"intersect"</code>
 409 </div>
 410 <div>
 411                                 Specifies which mode to use for testing whether the item being moved is hovering over another item. Possible values:
 412                                 <ul>
 413                                         <li>
 414 <code>"intersect"</code>: The item overlaps the other item by at least 50%.</li>
 415                                         <li>
 416 <code>"pointer"</code>: The mouse pointer overlaps the other item.</li>
 417                                 </ul>
 418                         </div>
 419 <strong>Code examples:</strong><p>Initialize the sortable with the tolerance option specified:</p>
 420 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ tolerance: </code><code class="string">"pointer"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 421 <p>Get or set the tolerance option, after initialization:</p>
 422 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">tolerance = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"tolerance"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"tolerance"</code><code class="plain">, </code><code class="string">"pointer"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 423 </div>
 424 <div id="option-zIndex" class="api-item">
 425 <h3>zIndex<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Integer">Integer</a></span>
 426 </h3>
 427 <div class="default">
 428 <strong>Default: </strong><code>1000</code>
 429 </div>
 430 <div>Z-index for element/helper while being sorted.</div>
 431 <strong>Code examples:</strong><p>Initialize the sortable with the zIndex option specified:</p>
 432 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({ zIndex: 9999 });</code></div></div></td></tr></tbody></table></div>
 433 <p>Get or set the zIndex option, after initialization:</p>
 434 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">zIndex = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"zIndex"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"zIndex"</code><code class="plain">, 9999 );</code></div></div></td></tr></tbody></table></div>
 435 </div></section><section id="methods"><header><h2 class="underline">Methods</h2></header><div id="method-cancel"><div class="api-item first-item">
 436 <h3>cancel()</h3>
 437 <div>Cancels a change in the current sortable and reverts it to the state prior to when the current sort was started. Useful in the stop and receive callback functions.</div>
 438 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
 439 <div>
 440 <strong>Code examples:</strong><p>Invoke the cancel method:</p>
 441 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"cancel"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 442 </div>
 443 </div></div>
 444 <div id="method-destroy"><div class="api-item">
 445 <h3>destroy()</h3>
 446 <div>
 447                 Removes the sortable functionality completely. This will return the element back to its pre-init state.
 448         </div>
 449 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
 450 <div>
 451 <strong>Code examples:</strong><p>Invoke the destroy method:</p>
 452 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"destroy"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 453 </div>
 454 </div></div>
 455 <div id="method-disable"><div class="api-item">
 456 <h3>disable()</h3>
 457 <div>
 458                 Disables the sortable.
 459         </div>
 460 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
 461 <div>
 462 <strong>Code examples:</strong><p>Invoke the disable method:</p>
 463 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"disable"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 464 </div>
 465 </div></div>
 466 <div id="method-enable"><div class="api-item">
 467 <h3>enable()</h3>
 468 <div>
 469                 Enables the sortable.
 470         </div>
 471 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
 472 <div>
 473 <strong>Code examples:</strong><p>Invoke the enable method:</p>
 474 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"enable"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 475 </div>
 476 </div></div>
 477 <div id="method-option">
 478 <div class="api-item">
 479 <h3>option( optionName )<span class="returns">Returns: <a href="http://api.jquery.com/Types#Object">Object</a></span>
 480 </h3>
 481 <div>Gets the value currently associated with the specified <code>optionName</code>.</div>
 482 <ul><li>
 483 <div><strong>optionName</strong></div>
 484 <div>Type: <a href="http://api.jquery.com/Types#String">String</a>
 485 </div>
 486 <div>The name of the option to get.</div>
 487 </li></ul>
 488 <div>
 489 <strong>Code examples:</strong><p>Invoke the  method:</p>
 490 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">isDisabled = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 491 </div>
 492 </div>
 493 <div class="api-item">
 494 <h3>option()<span class="returns">Returns: <a href="http://api.jquery.com/Types#PlainObject">PlainObject</a></span>
 495 </h3>
 496 <div>Gets an object containing key/value pairs representing the current sortable options hash.</div>
 497 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
 498 <div>
 499 <strong>Code examples:</strong><p>Invoke the  method:</p>
 500 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">options = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 501 </div>
 502 </div>
 503 <div class="api-item">
 504 <h3>option( optionName, value )</h3>
 505 <div>Sets the value of the sortable option associated with the specified <code>optionName</code>.</div>
 506 <ul>
 507 <li>
 508 <div><strong>optionName</strong></div>
 509 <div>Type: <a href="http://api.jquery.com/Types#String">String</a>
 510 </div>
 511 <div>The name of the option to set.</div>
 512 </li>
 513 <li>
 514 <div><strong>value</strong></div>
 515 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 516 </div>
 517 <div>A value to set for the option.</div>
 518 </li>
 519 </ul>
 520 <div>
 521 <strong>Code examples:</strong><p>Invoke the  method:</p>
 522 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 523 </div>
 524 </div>
 525 <div class="api-item">
 526 <h3>option( options )</h3>
 527 <div>Sets one or more options for the sortable.</div>
 528 <ul><li>
 529 <div><strong>options</strong></div>
 530 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 531 </div>
 532 <div>A map of option-value pairs to set.</div>
 533 </li></ul>
 534 <div>
 535 <strong>Code examples:</strong><p>Invoke the  method:</p>
 536 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"option"</code><code class="plain">, { disabled: </code><code class="keyword">true</code> <code class="plain">} );</code></div></div></td></tr></tbody></table></div>
 537 </div>
 538 </div>
 539 </div>
 540 <div id="method-refresh"><div class="api-item">
 541 <h3>refresh()</h3>
 542 <div>Refresh the sortable items. Triggers the reloading of all sortable items, causing new items to be recognized.</div>
 543 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
 544 <div>
 545 <strong>Code examples:</strong><p>Invoke the refresh method:</p>
 546 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"refresh"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 547 </div>
 548 </div></div>
 549 <div id="method-refreshPositions"><div class="api-item">
 550 <h3>refreshPositions()</h3>
 551 <div>Refresh the cached positions of the sortable items. Calling this method refreshes the cached item positions of all sortables.</div>
 552 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
 553 <div>
 554 <strong>Code examples:</strong><p>Invoke the refreshPositions method:</p>
 555 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"refreshPositions"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 556 </div>
 557 </div></div>
 558 <div id="method-serialize"><div class="api-item">
 559 <h3>serialize( options )<span class="returns">Returns: <a href="http://api.jquery.com/Types#String">String</a></span>
 560 </h3>
 561 <div>
 562                                 <p>Serializes the sortable's item <code>id</code>s 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>
 563
 564                                 <p>It works by default by looking at the <code>id</code> of each item in the format <code>"setname_number"</code>, and it spits out a hash like <code>"setname[]=number&amp;setname[]=number"</code>.</p>
 565
 566                                 <p><em>Note: If serialize returns an empty string, make sure the <code>id</code> attributes include an underscore.  They must be in the form: <code>"set_number"</code> For example, a 3 element list with <code>id</code> attributes <code>"foo_1"</code>, <code>"foo_5"</code>, <code>"foo_2"</code> will serialize to <code>"foo[]=1&amp;foo[]=5&amp;foo[]=2"</code>. You can use an underscore, equal sign or hyphen to separate the set and number. For example <code>"foo=1"</code>, <code>"foo-1"</code>, and <code>"foo_1"</code> all serialize to <code>"foo[]=1"</code>.</em></p>
 567                         </div>
 568 <ul><li>
 569 <div><strong>options</strong></div>
 570 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 571 </div>
 572 <div>Options to customize the serialization.</div>
 573 <ul>
 574 <li>
 575 <div>
 576 <strong>key</strong> (default: <code>the part of the attribute in front of the separator</code>)</div>
 577 <div>Type: <a href="http://api.jquery.com/Types#String">String</a>
 578 </div>
 579 <div>Replaces <code>part1[]</code> with the specified value.</div>
 580 </li>
 581 <li>
 582 <div>
 583 <strong>attribute</strong> (default: <code>"id"</code>)</div>
 584 <div>Type: <a href="http://api.jquery.com/Types#String">String</a>
 585 </div>
 586 <div>The name of the attribute to use for the values.</div>
 587 </li>
 588 <li>
 589 <div>
 590 <strong>expression</strong> (default: <code>/(.+)[-=_](.+)/</code>)</div>
 591 <div>Type: <a href="http://api.jquery.com/Types#RegExp">RegExp</a>
 592 </div>
 593 <div>A regular expression used to split the attribute value into key and value parts.</div>
 594 </li>
 595 </ul>
 596 </li></ul>
 597 <div>
 598 <strong>Code examples:</strong><p>Invoke the serialize method:</p>
 599 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">sorted = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"serialize"</code><code class="plain">, { key: </code><code class="string">"sort"</code> <code class="plain">} );</code></div></div></td></tr></tbody></table></div>
 600 </div>
 601 </div></div>
 602 <div id="method-toArray"><div class="api-item">
 603 <h3>toArray()<span class="returns">Returns: <a href="http://api.jquery.com/Types#Array">Array</a></span>
 604 </h3>
 605 <div>Serializes the sortable's item id's into an array of string.</div>
 606 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
 607 <div>
 608 <strong>Code examples:</strong><p>Invoke the toArray method:</p>
 609 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">sortedIDs = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"toArray"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 610 </div>
 611 </div></div>
 612 <div id="method-widget"><div class="api-item">
 613 <h3>widget()<span class="returns">Returns: <a href="http://api.jquery.com/Types#jQuery">jQuery</a></span>
 614 </h3>
 615 <div>
 616                 Returns a <code>jQuery</code> object containing the sortable element.
 617         </div>
 618 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
 619 <div>
 620 <strong>Code examples:</strong><p>Invoke the widget method:</p>
 621 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">widget = $( </code><code class="string">".selector"</code> <code class="plain">).sortable( </code><code class="string">"widget"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 622 </div>
 623 </div></div></section><section id="events"><header><h2 class="underline">Events</h2></header><div id="event-activate" class="api-item first-item">
 624 <h3>activate( event, ui )<span class="returns">Type: <code>sortactivate</code></span>
 625 </h3>
 626 <div>This event is triggered when using connected lists, every connected list on drag start receives it.</div>
 627 <ul>
 628 <li>
 629 <div><strong>event</strong></div>
 630 <div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
 631 </div>
 632 <div></div>
 633 </li>
 634 <li>
 635 <div><strong>ui</strong></div>
 636 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 637 </div>
 638 <div></div>
 639 <ul>
 640 <li>
 641 <div><strong>helper</strong></div>
 642 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
 643 </div>
 644 <div>The jQuery object representing the helper being sorted</div>
 645 </li>
 646 <li>
 647 <div><strong>item</strong></div>
 648 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
 649 </div>
 650 <div>The jQuery object representing the current dragged element</div>
 651 </li>
 652 <li>
 653 <div><strong>offset</strong></div>
 654 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 655 </div>
 656 <div>The current absolute position of the helper represented as <code>{ top, left }</code>
 657 </div>
 658 </li>
 659 <li>
 660 <div><strong>position</strong></div>
 661 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 662 </div>
 663 <div>The current position of the helper represented as <code>{ top, left }</code>
 664 </div>
 665 </li>
 666 <li>
 667 <div><strong>originalPosition</strong></div>
 668 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 669 </div>
 670 <div>The original position of the element represented as <code>{ top, left }</code>
 671 </div>
 672 </li>
 673 <li>
 674 <div><strong>sender</strong></div>
 675 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
 676 </div>
 677 <div>The sortable that the item comes from if moving from one sortable to another</div>
 678 </li>
 679 </ul>
 680 </li>
 681 </ul>
 682 <div>
 683 <strong>Code examples:</strong><p>Initialize the sortable with the activate callback specified:</p>
 684 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">activate: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
 685 <p>Bind an event listener to the sortactivate event:</p>
 686 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"sortactivate"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
 687 </div>
 688 </div>
 689 <div id="event-beforeStop" class="api-item">
 690 <h3>beforeStop( event, ui )<span class="returns">Type: <code>sortbeforestop</code></span>
 691 </h3>
 692 <div>This event is triggered when sorting stops, but when the placeholder/helper is still available.</div>
 693 <ul>
 694 <li>
 695 <div><strong>event</strong></div>
 696 <div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
 697 </div>
 698 <div></div>
 699 </li>
 700 <li>
 701 <div><strong>ui</strong></div>
 702 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 703 </div>
 704 <div></div>
 705 <ul>
 706 <li>
 707 <div><strong>helper</strong></div>
 708 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
 709 </div>
 710 <div>The jQuery object representing the helper being sorted</div>
 711 </li>
 712 <li>
 713 <div><strong>item</strong></div>
 714 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
 715 </div>
 716 <div>The jQuery object representing the current dragged element</div>
 717 </li>
 718 <li>
 719 <div><strong>offset</strong></div>
 720 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 721 </div>
 722 <div>The current absolute position of the helper represented as <code>{ top, left }</code>
 723 </div>
 724 </li>
 725 <li>
 726 <div><strong>position</strong></div>
 727 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 728 </div>
 729 <div>The current position of the helper represented as <code>{ top, left }</code>
 730 </div>
 731 </li>
 732 <li>
 733 <div><strong>originalPosition</strong></div>
 734 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 735 </div>
 736 <div>The original position of the element represented as <code>{ top, left }</code>
 737 </div>
 738 </li>
 739 <li>
 740 <div><strong>sender</strong></div>
 741 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
 742 </div>
 743 <div>The sortable that the item comes from if moving from one sortable to another</div>
 744 </li>
 745 </ul>
 746 </li>
 747 </ul>
 748 <div>
 749 <strong>Code examples:</strong><p>Initialize the sortable with the beforeStop callback specified:</p>
 750 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">beforeStop: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
 751 <p>Bind an event listener to the sortbeforestop event:</p>
 752 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"sortbeforestop"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
 753 </div>
 754 </div>
 755 <div id="event-change" class="api-item">
 756 <h3>change( event, ui )<span class="returns">Type: <code>sortchange</code></span>
 757 </h3>
 758 <div>This event is triggered during sorting, but only when the DOM position has changed.</div>
 759 <ul>
 760 <li>
 761 <div><strong>event</strong></div>
 762 <div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
 763 </div>
 764 <div></div>
 765 </li>
 766 <li>
 767 <div><strong>ui</strong></div>
 768 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 769 </div>
 770 <div></div>
 771 <ul>
 772 <li>
 773 <div><strong>helper</strong></div>
 774 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
 775 </div>
 776 <div>The jQuery object representing the helper being sorted</div>
 777 </li>
 778 <li>
 779 <div><strong>item</strong></div>
 780 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
 781 </div>
 782 <div>The jQuery object representing the current dragged element</div>
 783 </li>
 784 <li>
 785 <div><strong>offset</strong></div>
 786 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 787 </div>
 788 <div>The current absolute position of the helper represented as <code>{ top, left }</code>
 789 </div>
 790 </li>
 791 <li>
 792 <div><strong>position</strong></div>
 793 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 794 </div>
 795 <div>The current position of the helper represented as <code>{ top, left }</code>
 796 </div>
 797 </li>
 798 <li>
 799 <div><strong>originalPosition</strong></div>
 800 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 801 </div>
 802 <div>The original position of the element represented as <code>{ top, left }</code>
 803 </div>
 804 </li>
 805 <li>
 806 <div><strong>sender</strong></div>
 807 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
 808 </div>
 809 <div>The sortable that the item comes from if moving from one sortable to another</div>
 810 </li>
 811 </ul>
 812 </li>
 813 </ul>
 814 <div>
 815 <strong>Code examples:</strong><p>Initialize the sortable with the change callback specified:</p>
 816 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">change: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
 817 <p>Bind an event listener to the sortchange event:</p>
 818 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"sortchange"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
 819 </div>
 820 </div>
 821 <div id="event-create" class="api-item">
 822 <h3>create( event, ui )<span class="returns">Type: <code>sortcreate</code></span>
 823 </h3>
 824 <div>
 825                 Triggered when the sortable is created.
 826         </div>
 827 <ul>
 828 <li>
 829 <div><strong>event</strong></div>
 830 <div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
 831 </div>
 832 <div></div>
 833 </li>
 834 <li>
 835 <div><strong>ui</strong></div>
 836 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 837 </div>
 838 <div></div>
 839 </li>
 840 </ul>
 841 <div>
 842 <strong>Code examples:</strong><p>Initialize the sortable with the create callback specified:</p>
 843 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">create: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
 844 <p>Bind an event listener to the sortcreate event:</p>
 845 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"sortcreate"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
 846 </div>
 847 </div>
 848 <div id="event-deactivate" class="api-item">
 849 <h3>deactivate( event, ui )<span class="returns">Type: <code>sortdeactivate</code></span>
 850 </h3>
 851 <div>This event is triggered when sorting was stopped, is propagated to all possible connected lists.</div>
 852 <ul>
 853 <li>
 854 <div><strong>event</strong></div>
 855 <div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
 856 </div>
 857 <div></div>
 858 </li>
 859 <li>
 860 <div><strong>ui</strong></div>
 861 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 862 </div>
 863 <div></div>
 864 <ul>
 865 <li>
 866 <div><strong>helper</strong></div>
 867 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
 868 </div>
 869 <div>The jQuery object representing the helper being sorted</div>
 870 </li>
 871 <li>
 872 <div><strong>item</strong></div>
 873 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
 874 </div>
 875 <div>The jQuery object representing the current dragged element</div>
 876 </li>
 877 <li>
 878 <div><strong>offset</strong></div>
 879 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 880 </div>
 881 <div>The current absolute position of the helper represented as <code>{ top, left }</code>
 882 </div>
 883 </li>
 884 <li>
 885 <div><strong>position</strong></div>
 886 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 887 </div>
 888 <div>The current position of the helper represented as <code>{ top, left }</code>
 889 </div>
 890 </li>
 891 <li>
 892 <div><strong>originalPosition</strong></div>
 893 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 894 </div>
 895 <div>The original position of the element represented as <code>{ top, left }</code>
 896 </div>
 897 </li>
 898 <li>
 899 <div><strong>sender</strong></div>
 900 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
 901 </div>
 902 <div>The sortable that the item comes from if moving from one sortable to another</div>
 903 </li>
 904 </ul>
 905 </li>
 906 </ul>
 907 <div>
 908 <strong>Code examples:</strong><p>Initialize the sortable with the deactivate callback specified:</p>
 909 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">deactivate: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
 910 <p>Bind an event listener to the sortdeactivate event:</p>
 911 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"sortdeactivate"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
 912 </div>
 913 </div>
 914 <div id="event-out" class="api-item">
 915 <h3>out( event, ui )<span class="returns">Type: <code>sortout</code></span>
 916 </h3>
 917 <div>This event is triggered when a sortable item is moved away from a connected list.</div>
 918 <ul>
 919 <li>
 920 <div><strong>event</strong></div>
 921 <div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
 922 </div>
 923 <div></div>
 924 </li>
 925 <li>
 926 <div><strong>ui</strong></div>
 927 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 928 </div>
 929 <div></div>
 930 <ul>
 931 <li>
 932 <div><strong>helper</strong></div>
 933 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
 934 </div>
 935 <div>The jQuery object representing the helper being sorted</div>
 936 </li>
 937 <li>
 938 <div><strong>item</strong></div>
 939 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
 940 </div>
 941 <div>The jQuery object representing the current dragged element</div>
 942 </li>
 943 <li>
 944 <div><strong>offset</strong></div>
 945 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 946 </div>
 947 <div>The current absolute position of the helper represented as <code>{ top, left }</code>
 948 </div>
 949 </li>
 950 <li>
 951 <div><strong>position</strong></div>
 952 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 953 </div>
 954 <div>The current position of the helper represented as <code>{ top, left }</code>
 955 </div>
 956 </li>
 957 <li>
 958 <div><strong>originalPosition</strong></div>
 959 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 960 </div>
 961 <div>The original position of the element represented as <code>{ top, left }</code>
 962 </div>
 963 </li>
 964 <li>
 965 <div><strong>sender</strong></div>
 966 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
 967 </div>
 968 <div>The sortable that the item comes from if moving from one sortable to another</div>
 969 </li>
 970 </ul>
 971 </li>
 972 </ul>
 973 <div>
 974 <strong>Code examples:</strong><p>Initialize the sortable with the out callback specified:</p>
 975 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">out: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
 976 <p>Bind an event listener to the sortout event:</p>
 977 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"sortout"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
 978 </div>
 979 </div>
 980 <div id="event-over" class="api-item">
 981 <h3>over( event, ui )<span class="returns">Type: <code>sortover</code></span>
 982 </h3>
 983 <div>This event is triggered when a sortable item is moved into a connected list.</div>
 984 <ul>
 985 <li>
 986 <div><strong>event</strong></div>
 987 <div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
 988 </div>
 989 <div></div>
 990 </li>
 991 <li>
 992 <div><strong>ui</strong></div>
 993 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 994 </div>
 995 <div></div>
 996 <ul>
 997 <li>
 998 <div><strong>helper</strong></div>
 999 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
1000 </div>
1001 <div>The jQuery object representing the helper being sorted</div>
1002 </li>
1003 <li>
1004 <div><strong>item</strong></div>
1005 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
1006 </div>
1007 <div>The jQuery object representing the current dragged element</div>
1008 </li>
1009 <li>
1010 <div><strong>offset</strong></div>
1011 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1012 </div>
1013 <div>The current absolute position of the helper represented as <code>{ top, left }</code>
1014 </div>
1015 </li>
1016 <li>
1017 <div><strong>position</strong></div>
1018 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1019 </div>
1020 <div>The current position of the helper represented as <code>{ top, left }</code>
1021 </div>
1022 </li>
1023 <li>
1024 <div><strong>originalPosition</strong></div>
1025 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1026 </div>
1027 <div>The original position of the element represented as <code>{ top, left }</code>
1028 </div>
1029 </li>
1030 <li>
1031 <div><strong>sender</strong></div>
1032 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
1033 </div>
1034 <div>The sortable that the item comes from if moving from one sortable to another</div>
1035 </li>
1036 </ul>
1037 </li>
1038 </ul>
1039 <div>
1040 <strong>Code examples:</strong><p>Initialize the sortable with the over callback specified:</p>
1041 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">over: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
1042 <p>Bind an event listener to the sortover event:</p>
1043 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"sortover"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
1044 </div>
1045 </div>
1046 <div id="event-receive" class="api-item">
1047 <h3>receive( event, ui )<span class="returns">Type: <code>sortreceive</code></span>
1048 </h3>
1049 <div>This event is triggered when a connected sortable list has received an item from another list.</div>
1050 <ul>
1051 <li>
1052 <div><strong>event</strong></div>
1053 <div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
1054 </div>
1055 <div></div>
1056 </li>
1057 <li>
1058 <div><strong>ui</strong></div>
1059 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1060 </div>
1061 <div></div>
1062 <ul>
1063 <li>
1064 <div><strong>helper</strong></div>
1065 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
1066 </div>
1067 <div>The jQuery object representing the helper being sorted</div>
1068 </li>
1069 <li>
1070 <div><strong>item</strong></div>
1071 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
1072 </div>
1073 <div>The jQuery object representing the current dragged element</div>
1074 </li>
1075 <li>
1076 <div><strong>offset</strong></div>
1077 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1078 </div>
1079 <div>The current absolute position of the helper represented as <code>{ top, left }</code>
1080 </div>
1081 </li>
1082 <li>
1083 <div><strong>position</strong></div>
1084 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1085 </div>
1086 <div>The current position of the helper represented as <code>{ top, left }</code>
1087 </div>
1088 </li>
1089 <li>
1090 <div><strong>originalPosition</strong></div>
1091 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1092 </div>
1093 <div>The original position of the element represented as <code>{ top, left }</code>
1094 </div>
1095 </li>
1096 <li>
1097 <div><strong>sender</strong></div>
1098 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
1099 </div>
1100 <div>The sortable that the item comes from if moving from one sortable to another</div>
1101 </li>
1102 </ul>
1103 </li>
1104 </ul>
1105 <div>
1106 <strong>Code examples:</strong><p>Initialize the sortable with the receive callback specified:</p>
1107 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">receive: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
1108 <p>Bind an event listener to the sortreceive event:</p>
1109 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"sortreceive"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
1110 </div>
1111 </div>
1112 <div id="event-remove" class="api-item">
1113 <h3>remove( event, ui )<span class="returns">Type: <code>sortremove</code></span>
1114 </h3>
1115 <div>This event is triggered when a sortable item has been dragged out from the list and into another.</div>
1116 <ul>
1117 <li>
1118 <div><strong>event</strong></div>
1119 <div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
1120 </div>
1121 <div></div>
1122 </li>
1123 <li>
1124 <div><strong>ui</strong></div>
1125 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1126 </div>
1127 <div></div>
1128 <ul>
1129 <li>
1130 <div><strong>helper</strong></div>
1131 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
1132 </div>
1133 <div>The jQuery object representing the helper being sorted</div>
1134 </li>
1135 <li>
1136 <div><strong>item</strong></div>
1137 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
1138 </div>
1139 <div>The jQuery object representing the current dragged element</div>
1140 </li>
1141 <li>
1142 <div><strong>offset</strong></div>
1143 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1144 </div>
1145 <div>The current absolute position of the helper represented as <code>{ top, left }</code>
1146 </div>
1147 </li>
1148 <li>
1149 <div><strong>position</strong></div>
1150 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1151 </div>
1152 <div>The current position of the helper represented as <code>{ top, left }</code>
1153 </div>
1154 </li>
1155 <li>
1156 <div><strong>originalPosition</strong></div>
1157 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1158 </div>
1159 <div>The original position of the element represented as <code>{ top, left }</code>
1160 </div>
1161 </li>
1162 <li>
1163 <div><strong>sender</strong></div>
1164 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
1165 </div>
1166 <div>The sortable that the item comes from if moving from one sortable to another</div>
1167 </li>
1168 </ul>
1169 </li>
1170 </ul>
1171 <div>
1172 <strong>Code examples:</strong><p>Initialize the sortable with the remove callback specified:</p>
1173 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">remove: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
1174 <p>Bind an event listener to the sortremove event:</p>
1175 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"sortremove"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
1176 </div>
1177 </div>
1178 <div id="event-sort" class="api-item">
1179 <h3>sort( event, ui )<span class="returns">Type: <code>sort</code></span>
1180 </h3>
1181 <div>This event is triggered during sorting.</div>
1182 <ul>
1183 <li>
1184 <div><strong>event</strong></div>
1185 <div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
1186 </div>
1187 <div></div>
1188 </li>
1189 <li>
1190 <div><strong>ui</strong></div>
1191 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1192 </div>
1193 <div></div>
1194 <ul>
1195 <li>
1196 <div><strong>helper</strong></div>
1197 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
1198 </div>
1199 <div>The jQuery object representing the helper being sorted</div>
1200 </li>
1201 <li>
1202 <div><strong>item</strong></div>
1203 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
1204 </div>
1205 <div>The jQuery object representing the current dragged element</div>
1206 </li>
1207 <li>
1208 <div><strong>offset</strong></div>
1209 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1210 </div>
1211 <div>The current absolute position of the helper represented as <code>{ top, left }</code>
1212 </div>
1213 </li>
1214 <li>
1215 <div><strong>position</strong></div>
1216 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1217 </div>
1218 <div>The current position of the helper represented as <code>{ top, left }</code>
1219 </div>
1220 </li>
1221 <li>
1222 <div><strong>originalPosition</strong></div>
1223 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1224 </div>
1225 <div>The original position of the element represented as <code>{ top, left }</code>
1226 </div>
1227 </li>
1228 <li>
1229 <div><strong>sender</strong></div>
1230 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
1231 </div>
1232 <div>The sortable that the item comes from if moving from one sortable to another</div>
1233 </li>
1234 </ul>
1235 </li>
1236 </ul>
1237 <div>
1238 <strong>Code examples:</strong><p>Initialize the sortable with the sort callback specified:</p>
1239 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">sort: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
1240 <p>Bind an event listener to the sort event:</p>
1241 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"sort"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
1242 </div>
1243 </div>
1244 <div id="event-start" class="api-item">
1245 <h3>start( event, ui )<span class="returns">Type: <code>sortstart</code></span>
1246 </h3>
1247 <div>This event is triggered when sorting starts.</div>
1248 <ul>
1249 <li>
1250 <div><strong>event</strong></div>
1251 <div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
1252 </div>
1253 <div></div>
1254 </li>
1255 <li>
1256 <div><strong>ui</strong></div>
1257 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1258 </div>
1259 <div></div>
1260 <ul>
1261 <li>
1262 <div><strong>helper</strong></div>
1263 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
1264 </div>
1265 <div>The jQuery object representing the helper being sorted</div>
1266 </li>
1267 <li>
1268 <div><strong>item</strong></div>
1269 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
1270 </div>
1271 <div>The jQuery object representing the current dragged element</div>
1272 </li>
1273 <li>
1274 <div><strong>offset</strong></div>
1275 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1276 </div>
1277 <div>The current absolute position of the helper represented as <code>{ top, left }</code>
1278 </div>
1279 </li>
1280 <li>
1281 <div><strong>position</strong></div>
1282 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1283 </div>
1284 <div>The current position of the helper represented as <code>{ top, left }</code>
1285 </div>
1286 </li>
1287 <li>
1288 <div><strong>originalPosition</strong></div>
1289 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1290 </div>
1291 <div>The original position of the element represented as <code>{ top, left }</code>
1292 </div>
1293 </li>
1294 <li>
1295 <div><strong>sender</strong></div>
1296 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
1297 </div>
1298 <div>The sortable that the item comes from if moving from one sortable to another</div>
1299 </li>
1300 </ul>
1301 </li>
1302 </ul>
1303 <div>
1304 <strong>Code examples:</strong><p>Initialize the sortable with the start callback specified:</p>
1305 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">start: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
1306 <p>Bind an event listener to the sortstart event:</p>
1307 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"sortstart"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
1308 </div>
1309 </div>
1310 <div id="event-stop" class="api-item">
1311 <h3>stop( event, ui )<span class="returns">Type: <code>sortstop</code></span>
1312 </h3>
1313 <div>This event is triggered when sorting has stopped.</div>
1314 <ul>
1315 <li>
1316 <div><strong>event</strong></div>
1317 <div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
1318 </div>
1319 <div></div>
1320 </li>
1321 <li>
1322 <div><strong>ui</strong></div>
1323 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1324 </div>
1325 <div></div>
1326 <ul>
1327 <li>
1328 <div><strong>helper</strong></div>
1329 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
1330 </div>
1331 <div>The jQuery object representing the helper being sorted</div>
1332 </li>
1333 <li>
1334 <div><strong>item</strong></div>
1335 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
1336 </div>
1337 <div>The jQuery object representing the current dragged element</div>
1338 </li>
1339 <li>
1340 <div><strong>offset</strong></div>
1341 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1342 </div>
1343 <div>The current absolute position of the helper represented as <code>{ top, left }</code>
1344 </div>
1345 </li>
1346 <li>
1347 <div><strong>position</strong></div>
1348 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1349 </div>
1350 <div>The current position of the helper represented as <code>{ top, left }</code>
1351 </div>
1352 </li>
1353 <li>
1354 <div><strong>originalPosition</strong></div>
1355 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1356 </div>
1357 <div>The original position of the element represented as <code>{ top, left }</code>
1358 </div>
1359 </li>
1360 <li>
1361 <div><strong>sender</strong></div>
1362 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
1363 </div>
1364 <div>The sortable that the item comes from if moving from one sortable to another</div>
1365 </li>
1366 </ul>
1367 </li>
1368 </ul>
1369 <div>
1370 <strong>Code examples:</strong><p>Initialize the sortable with the stop callback specified:</p>
1371 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">stop: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
1372 <p>Bind an event listener to the sortstop event:</p>
1373 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"sortstop"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
1374 </div>
1375 </div>
1376 <div id="event-update" class="api-item">
1377 <h3>update( event, ui )<span class="returns">Type: <code>sortupdate</code></span>
1378 </h3>
1379 <div>This event is triggered when the user stopped sorting and the DOM position has changed.</div>
1380 <ul>
1381 <li>
1382 <div><strong>event</strong></div>
1383 <div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
1384 </div>
1385 <div></div>
1386 </li>
1387 <li>
1388 <div><strong>ui</strong></div>
1389 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1390 </div>
1391 <div></div>
1392 <ul>
1393 <li>
1394 <div><strong>helper</strong></div>
1395 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
1396 </div>
1397 <div>The jQuery object representing the helper being sorted</div>
1398 </li>
1399 <li>
1400 <div><strong>item</strong></div>
1401 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
1402 </div>
1403 <div>The jQuery object representing the current dragged element</div>
1404 </li>
1405 <li>
1406 <div><strong>offset</strong></div>
1407 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1408 </div>
1409 <div>The current absolute position of the helper represented as <code>{ top, left }</code>
1410 </div>
1411 </li>
1412 <li>
1413 <div><strong>position</strong></div>
1414 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1415 </div>
1416 <div>The current position of the helper represented as <code>{ top, left }</code>
1417 </div>
1418 </li>
1419 <li>
1420 <div><strong>originalPosition</strong></div>
1421 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
1422 </div>
1423 <div>The original position of the element represented as <code>{ top, left }</code>
1424 </div>
1425 </li>
1426 <li>
1427 <div><strong>sender</strong></div>
1428 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
1429 </div>
1430 <div>The sortable that the item comes from if moving from one sortable to another</div>
1431 </li>
1432 </ul>
1433 </li>
1434 </ul>
1435 <div>
1436 <strong>Code examples:</strong><p>Initialize the sortable with the update callback specified:</p>
1437 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).sortable({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">update: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
1438 <p>Bind an event listener to the sortupdate event:</p>
1439 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"sortupdate"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
1440 </div>
1441 </div></section><section class="entry-examples" id="entry-examples"><header><h2 class="underline">Example:</h2></header><div class="entry-example" id="example-0">
1442 <h4><span class="desc">A simple jQuery UI Sortable.</span></h4>
1443 <div class="syntaxhighlighter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div><div class="line number12 index11 alt1">12</div><div class="line number13 index12 alt2">13</div><div class="line number14 index13 alt1">14</div><div class="line number15 index14 alt2">15</div><div class="line number16 index15 alt1">16</div><div class="line number17 index16 alt2">17</div><div class="line number18 index17 alt1">18</div><div class="line number19 index18 alt2">19</div><div class="line number20 index19 alt1">20</div><div class="line number21 index20 alt2">21</div><div class="line number22 index21 alt1">22</div><div class="line number23 index22 alt2">23</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">&lt;!doctype html&gt;</code></div><div class="line number2 index1 alt1"><code class="plain">&lt;</code><code class="keyword">html</code> <code class="color1">lang</code><code class="plain">=</code><code class="string">"en"</code><code class="plain">&gt;</code></div><div class="line number3 index2 alt2"><code class="plain">&lt;</code><code class="keyword">head</code><code class="plain">&gt;</code></div><div class="line number4 index3 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">meta</code> <code class="color1">charset</code><code class="plain">=</code><code class="string">"utf-8"</code><code class="plain">&gt;</code></div><div class="line number5 index4 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">title</code><code class="plain">&gt;sortable demo&lt;/</code><code class="keyword">title</code><code class="plain">&gt;</code></div><div class="line number6 index5 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">link</code> <code class="color1">rel</code><code class="plain">=</code><code class="string">"stylesheet"</code> <code class="color1">href</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css</a>"</code><code class="plain">&gt;</code></div><div class="line number7 index6 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/jquery-1.8.3.js">http://code.jquery.com/jquery-1.8.3.js</a>"</code><code class="plain">&gt;&lt;/</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number8 index7 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/ui/1.9.2/jquery-ui.js">http://code.jquery.com/ui/1.9.2/jquery-ui.js</a>"</code><code class="plain">&gt;&lt;/</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number9 index8 alt2"><code class="plain">&lt;/</code><code class="keyword">head</code><code class="plain">&gt;</code></div><div class="line number10 index9 alt1"><code class="plain">&lt;</code><code class="keyword">body</code><code class="plain">&gt;</code></div><div class="line number11 index10 alt2">&nbsp;</div><div class="line number12 index11 alt1"><code class="plain">&lt;</code><code class="keyword">ul</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"sortable"</code><code class="plain">&gt;</code></div><div class="line number13 index12 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">li</code><code class="plain">&gt;Item 1&lt;/</code><code class="keyword">li</code><code class="plain">&gt;</code></div><div class="line number14 index13 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">li</code><code class="plain">&gt;Item 2&lt;/</code><code class="keyword">li</code><code class="plain">&gt;</code></div><div class="line number15 index14 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">li</code><code class="plain">&gt;Item 3&lt;/</code><code class="keyword">li</code><code class="plain">&gt;</code></div><div class="line number16 index15 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">li</code><code class="plain">&gt;Item 4&lt;/</code><code class="keyword">li</code><code class="plain">&gt;</code></div><div class="line number17 index16 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">li</code><code class="plain">&gt;Item 5&lt;/</code><code class="keyword">li</code><code class="plain">&gt;</code></div><div class="line number18 index17 alt1"><code class="plain">&lt;/</code><code class="keyword">ul</code><code class="plain">&gt;</code></div><div class="line number19 index18 alt2">&nbsp;</div><div class="line number20 index19 alt1"><code class="plain">&lt;</code><code class="keyword">script</code><code class="plain">&gt;$("#sortable").sortable();&lt;/</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number21 index20 alt2">&nbsp;</div><div class="line number22 index21 alt1"><code class="plain">&lt;/</code><code class="keyword">body</code><code class="plain">&gt;</code></div><div class="line number23 index22 alt2"><code class="plain">&lt;/</code><code class="keyword">html</code><code class="plain">&gt;</code></div></div></td></tr></tbody></table></div>
1444 <h4>Demo:</h4>
1445 <div class="demo code-demo" data-height="150"></div>
1446 </div></section>
1447 </div></article>
1448
1449 </body>
1450 </html>