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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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>"> *"</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">"> 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"> </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">"> 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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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&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&foo[]=5&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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"><!doctype html></code></div><div class="line number2 index1 alt1"><code class="plain"><</code><code class="keyword">html</code> <code class="color1">lang</code><code class="plain">=</code><code class="string">"en"</code><code class="plain">></code></div><div class="line number3 index2 alt2"><code class="plain"><</code><code class="keyword">head</code><code class="plain">></code></div><div class="line number4 index3 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">meta</code> <code class="color1">charset</code><code class="plain">=</code><code class="string">"utf-8"</code><code class="plain">></code></div><div class="line number5 index4 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">title</code><code class="plain">>sortable demo</</code><code class="keyword">title</code><code class="plain">></code></div><div class="line number6 index5 alt1"><code class="undefined spaces"> </code><code class="plain"><</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">></code></div><div class="line number7 index6 alt2"><code class="undefined spaces"> </code><code class="plain"><</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">></</code><code class="keyword">script</code><code class="plain">></code></div><div class="line number8 index7 alt1"><code class="undefined spaces"> </code><code class="plain"><</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">></</code><code class="keyword">script</code><code class="plain">></code></div><div class="line number9 index8 alt2"><code class="plain"></</code><code class="keyword">head</code><code class="plain">></code></div><div class="line number10 index9 alt1"><code class="plain"><</code><code class="keyword">body</code><code class="plain">></code></div><div class="line number11 index10 alt2"> </div><div class="line number12 index11 alt1"><code class="plain"><</code><code class="keyword">ul</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"sortable"</code><code class="plain">></code></div><div class="line number13 index12 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">li</code><code class="plain">>Item 1</</code><code class="keyword">li</code><code class="plain">></code></div><div class="line number14 index13 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">li</code><code class="plain">>Item 2</</code><code class="keyword">li</code><code class="plain">></code></div><div class="line number15 index14 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">li</code><code class="plain">>Item 3</</code><code class="keyword">li</code><code class="plain">></code></div><div class="line number16 index15 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">li</code><code class="plain">>Item 4</</code><code class="keyword">li</code><code class="plain">></code></div><div class="line number17 index16 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">li</code><code class="plain">>Item 5</</code><code class="keyword">li</code><code class="plain">></code></div><div class="line number18 index17 alt1"><code class="plain"></</code><code class="keyword">ul</code><code class="plain">></code></div><div class="line number19 index18 alt2"> </div><div class="line number20 index19 alt1"><code class="plain"><</code><code class="keyword">script</code><code class="plain">>$("#sortable").sortable();</</code><code class="keyword">script</code><code class="plain">></code></div><div class="line number21 index20 alt2"> </div><div class="line number22 index21 alt1"><code class="plain"></</code><code class="keyword">body</code><code class="plain">></code></div><div class="line number23 index22 alt2"><code class="plain"></</code><code class="keyword">html</code><code class="plain">></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> |
---|