|
0
|
1
|
|
|
2 <ul class="UIAPIPlugin-toc">
|
|
|
3 <li><a href="#overview">Overview</a></li>
|
|
|
4 <li><a href="#options">Options</a></li>
|
|
|
5 <li><a href="#events">Events</a></li>
|
|
|
6 <li><a href="#methods">Methods</a></li>
|
|
|
7 <li><a href="#theming">Theming</a></li>
|
|
|
8 </ul>
|
|
|
9 <div class="UIAPIPlugin">
|
|
|
10 <h1>jQuery UI Sortable</h1>
|
|
|
11 <div id="overview">
|
|
|
12 <h2 class="top-header">Overview</h2>
|
|
|
13 <div id="overview-main">
|
|
|
14 <p>The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse.</p>
|
|
|
15 <p>All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):</p>
|
|
|
16 <ul>
|
|
|
17 <li><b>ui.helper</b> - the current helper element (most often a clone of the item)</li>
|
|
|
18 <li><b>ui.position</b> - current position of the helper</li>
|
|
|
19 <li><b>ui.offset</b> - current absolute position of the helper</li>
|
|
|
20 <li><b>ui.item</b> - the current dragged element</li>
|
|
|
21 <li><b>ui.placeholder</b> - the placeholder (if you defined one)</li>
|
|
|
22 <li><b>ui.sender</b> - the sortable where the item comes from (only exists if you move from one connected list to another)</li>
|
|
|
23 </ul>
|
|
|
24 </div>
|
|
|
25 <div id="overview-dependencies">
|
|
|
26 <h3>Dependencies</h3>
|
|
|
27 <ul>
|
|
|
28 <li>UI Core</li>
|
|
|
29 <li>UI Widget</li>
|
|
|
30 <li>UI Mouse</li>
|
|
|
31 </ul>
|
|
|
32 </div>
|
|
|
33 <div id="overview-example">
|
|
|
34 <h3>Example</h3>
|
|
|
35 <div id="overview-example" class="example">
|
|
|
36 <ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
|
|
|
37 <p><div id="demo" class="tabs-container" rel="100">
|
|
|
38 A simple jQuery UI Sortable.<br />
|
|
|
39 </p>
|
|
|
40 <pre>$("#sortable").sortable();
|
|
|
41 </pre>
|
|
|
42 <p></div><div id="source" class="tabs-container">
|
|
|
43 </p>
|
|
|
44 <pre><!DOCTYPE html>
|
|
|
45 <html>
|
|
|
46 <head>
|
|
|
47 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
|
|
|
48 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
|
|
|
49 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
|
|
|
50
|
|
|
51 <script>
|
|
|
52 $(document).ready(function() {
|
|
|
53 $("#sortable").sortable();
|
|
|
54 });
|
|
|
55 </script>
|
|
|
56 </head>
|
|
|
57 <body style="font-size:62.5%;">
|
|
|
58
|
|
|
59 <ul id="sortable">
|
|
|
60 <li>Item 1</li>
|
|
|
61 <li>Item 2</li>
|
|
|
62 <li>Item 3</li>
|
|
|
63 <li>Item 4</li>
|
|
|
64 <li>Item 5</li>
|
|
|
65 </ul>
|
|
|
66
|
|
|
67 </body>
|
|
|
68 </html>
|
|
|
69 </pre>
|
|
|
70 <p></div>
|
|
|
71 </p><p></div>
|
|
|
72 </div>
|
|
|
73 </div>
|
|
|
74 <div id="options">
|
|
|
75 <h2 class="top-header">Options</h2>
|
|
|
76 <ul class="options-list">
|
|
|
77
|
|
|
78 <li class="option" id="option-disabled">
|
|
|
79 <div class="option-header">
|
|
|
80 <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
|
|
|
81 <dl>
|
|
|
82 <dt class="option-type-label">Type:</dt>
|
|
|
83 <dd class="option-type">Boolean</dd>
|
|
|
84
|
|
|
85 <dt class="option-default-label">Default:</dt>
|
|
|
86 <dd class="option-default">false</dd>
|
|
|
87
|
|
|
88 </dl>
|
|
|
89 </div>
|
|
|
90 <div class="option-description">
|
|
|
91 <p>Disables (true) or enables (false) the sortable. Can be set when initialising (first creating) the sortable.</p>
|
|
|
92 </div>
|
|
|
93 <div class="option-examples">
|
|
|
94 <h4>Code examples</h4>
|
|
|
95 <dl class="option-examples-list">
|
|
|
96
|
|
|
97 <dt>
|
|
|
98 Initialize a sortable with the <code>disabled</code> option specified.
|
|
|
99 </dt>
|
|
|
100 <dd>
|
|
|
101 <pre><code>$( ".selector" ).sortable({ disabled: true });</code></pre>
|
|
|
102 </dd>
|
|
|
103
|
|
|
104
|
|
|
105 <dt>
|
|
|
106 Get or set the <code>disabled</code> option, after init.
|
|
|
107 </dt>
|
|
|
108 <dd>
|
|
|
109 <pre><code>//getter
|
|
|
110 var disabled = $( ".selector" ).sortable( "option", "disabled" );
|
|
|
111 //setter
|
|
|
112 $( ".selector" ).sortable( "option", "disabled", true );</code></pre>
|
|
|
113 </dd>
|
|
|
114
|
|
|
115 </dl>
|
|
|
116 </div>
|
|
|
117 </li>
|
|
|
118
|
|
|
119
|
|
|
120 <li class="option" id="option-appendTo">
|
|
|
121 <div class="option-header">
|
|
|
122 <h3 class="option-name"><a href="#option-appendTo">appendTo</a></h3>
|
|
|
123 <dl>
|
|
|
124 <dt class="option-type-label">Type:</dt>
|
|
|
125 <dd class="option-type">String</dd>
|
|
|
126
|
|
|
127 <dt class="option-default-label">Default:</dt>
|
|
|
128 <dd class="option-default">'parent'</dd>
|
|
|
129
|
|
|
130 </dl>
|
|
|
131 </div>
|
|
|
132 <div class="option-description">
|
|
|
133 <p>Defines where the helper that moves with the mouse is being appended to during the drag (for example, to resolve overlap/zIndex issues).</p>
|
|
|
134 </div>
|
|
|
135 <div class="option-examples">
|
|
|
136 <h4>Code examples</h4>
|
|
|
137 <dl class="option-examples-list">
|
|
|
138
|
|
|
139 <dt>
|
|
|
140 Initialize a sortable with the <code>appendTo</code> option specified.
|
|
|
141 </dt>
|
|
|
142 <dd>
|
|
|
143 <pre><code>$( ".selector" ).sortable({ appendTo: 'body' });</code></pre>
|
|
|
144 </dd>
|
|
|
145
|
|
|
146
|
|
|
147 <dt>
|
|
|
148 Get or set the <code>appendTo</code> option, after init.
|
|
|
149 </dt>
|
|
|
150 <dd>
|
|
|
151 <pre><code>//getter
|
|
|
152 var appendTo = $( ".selector" ).sortable( "option", "appendTo" );
|
|
|
153 //setter
|
|
|
154 $( ".selector" ).sortable( "option", "appendTo", 'body' );</code></pre>
|
|
|
155 </dd>
|
|
|
156
|
|
|
157 </dl>
|
|
|
158 </div>
|
|
|
159 </li>
|
|
|
160
|
|
|
161
|
|
|
162 <li class="option" id="option-axis">
|
|
|
163 <div class="option-header">
|
|
|
164 <h3 class="option-name"><a href="#option-axis">axis</a></h3>
|
|
|
165 <dl>
|
|
|
166 <dt class="option-type-label">Type:</dt>
|
|
|
167 <dd class="option-type">String</dd>
|
|
|
168
|
|
|
169 <dt class="option-default-label">Default:</dt>
|
|
|
170 <dd class="option-default">false</dd>
|
|
|
171
|
|
|
172 </dl>
|
|
|
173 </div>
|
|
|
174 <div class="option-description">
|
|
|
175 <p>If defined, the items can be dragged only horizontally or vertically. Possible values:'x', 'y'.</p>
|
|
|
176 </div>
|
|
|
177 <div class="option-examples">
|
|
|
178 <h4>Code examples</h4>
|
|
|
179 <dl class="option-examples-list">
|
|
|
180
|
|
|
181 <dt>
|
|
|
182 Initialize a sortable with the <code>axis</code> option specified.
|
|
|
183 </dt>
|
|
|
184 <dd>
|
|
|
185 <pre><code>$( ".selector" ).sortable({ axis: 'x' });</code></pre>
|
|
|
186 </dd>
|
|
|
187
|
|
|
188
|
|
|
189 <dt>
|
|
|
190 Get or set the <code>axis</code> option, after init.
|
|
|
191 </dt>
|
|
|
192 <dd>
|
|
|
193 <pre><code>//getter
|
|
|
194 var axis = $( ".selector" ).sortable( "option", "axis" );
|
|
|
195 //setter
|
|
|
196 $( ".selector" ).sortable( "option", "axis", 'x' );</code></pre>
|
|
|
197 </dd>
|
|
|
198
|
|
|
199 </dl>
|
|
|
200 </div>
|
|
|
201 </li>
|
|
|
202
|
|
|
203
|
|
|
204 <li class="option" id="option-cancel">
|
|
|
205 <div class="option-header">
|
|
|
206 <h3 class="option-name"><a href="#option-cancel">cancel</a></h3>
|
|
|
207 <dl>
|
|
|
208 <dt class="option-type-label">Type:</dt>
|
|
|
209 <dd class="option-type">Selector</dd>
|
|
|
210
|
|
|
211 <dt class="option-default-label">Default:</dt>
|
|
|
212 <dd class="option-default">':input,button'</dd>
|
|
|
213
|
|
|
214 </dl>
|
|
|
215 </div>
|
|
|
216 <div class="option-description">
|
|
|
217 <p>Prevents sorting if you start on elements matching the selector.</p>
|
|
|
218 </div>
|
|
|
219 <div class="option-examples">
|
|
|
220 <h4>Code examples</h4>
|
|
|
221 <dl class="option-examples-list">
|
|
|
222
|
|
|
223 <dt>
|
|
|
224 Initialize a sortable with the <code>cancel</code> option specified.
|
|
|
225 </dt>
|
|
|
226 <dd>
|
|
|
227 <pre><code>$( ".selector" ).sortable({ cancel: 'button' });</code></pre>
|
|
|
228 </dd>
|
|
|
229
|
|
|
230
|
|
|
231 <dt>
|
|
|
232 Get or set the <code>cancel</code> option, after init.
|
|
|
233 </dt>
|
|
|
234 <dd>
|
|
|
235 <pre><code>//getter
|
|
|
236 var cancel = $( ".selector" ).sortable( "option", "cancel" );
|
|
|
237 //setter
|
|
|
238 $( ".selector" ).sortable( "option", "cancel", 'button' );</code></pre>
|
|
|
239 </dd>
|
|
|
240
|
|
|
241 </dl>
|
|
|
242 </div>
|
|
|
243 </li>
|
|
|
244
|
|
|
245
|
|
|
246 <li class="option" id="option-connectWith">
|
|
|
247 <div class="option-header">
|
|
|
248 <h3 class="option-name"><a href="#option-connectWith">connectWith</a></h3>
|
|
|
249 <dl>
|
|
|
250 <dt class="option-type-label">Type:</dt>
|
|
|
251 <dd class="option-type">Selector</dd>
|
|
|
252
|
|
|
253 <dt class="option-default-label">Default:</dt>
|
|
|
254 <dd class="option-default">false</dd>
|
|
|
255
|
|
|
256 </dl>
|
|
|
257 </div>
|
|
|
258 <div class="option-description">
|
|
|
259 <p>Takes a jQuery selector with items that also have sortables applied. If used, the sortable is now connected to the other one-way, so you can drag from this sortable to the other.</p>
|
|
|
260 </div>
|
|
|
261 <div class="option-examples">
|
|
|
262 <h4>Code examples</h4>
|
|
|
263 <dl class="option-examples-list">
|
|
|
264
|
|
|
265 <dt>
|
|
|
266 Initialize a sortable with the <code>connectWith</code> option specified.
|
|
|
267 </dt>
|
|
|
268 <dd>
|
|
|
269 <pre><code>$( ".selector" ).sortable({ connectWith: '.otherlist' });</code></pre>
|
|
|
270 </dd>
|
|
|
271
|
|
|
272
|
|
|
273 <dt>
|
|
|
274 Get or set the <code>connectWith</code> option, after init.
|
|
|
275 </dt>
|
|
|
276 <dd>
|
|
|
277 <pre><code>//getter
|
|
|
278 var connectWith = $( ".selector" ).sortable( "option", "connectWith" );
|
|
|
279 //setter
|
|
|
280 $( ".selector" ).sortable( "option", "connectWith", '.otherlist' );</code></pre>
|
|
|
281 </dd>
|
|
|
282
|
|
|
283 </dl>
|
|
|
284 </div>
|
|
|
285 </li>
|
|
|
286
|
|
|
287
|
|
|
288 <li class="option" id="option-containment">
|
|
|
289 <div class="option-header">
|
|
|
290 <h3 class="option-name"><a href="#option-containment">containment</a></h3>
|
|
|
291 <dl>
|
|
|
292 <dt class="option-type-label">Type:</dt>
|
|
|
293 <dd class="option-type">Element, String, Selector</dd>
|
|
|
294
|
|
|
295 <dt class="option-default-label">Default:</dt>
|
|
|
296 <dd class="option-default">false</dd>
|
|
|
297
|
|
|
298 </dl>
|
|
|
299 </div>
|
|
|
300 <div class="option-description">
|
|
|
301 <p>Constrains dragging to within the bounds of the specified element - can be a DOM element, 'parent', 'document', 'window', or a jQuery selector.</p>
|
|
|
302 </div>
|
|
|
303 <div class="option-examples">
|
|
|
304 <h4>Code examples</h4>
|
|
|
305 <dl class="option-examples-list">
|
|
|
306
|
|
|
307 <dt>
|
|
|
308 Initialize a sortable with the <code>containment</code> option specified.
|
|
|
309 </dt>
|
|
|
310 <dd>
|
|
|
311 <pre><code>$( ".selector" ).sortable({ containment: 'parent' });</code></pre>
|
|
|
312 </dd>
|
|
|
313
|
|
|
314
|
|
|
315 <dt>
|
|
|
316 Get or set the <code>containment</code> option, after init.
|
|
|
317 </dt>
|
|
|
318 <dd>
|
|
|
319 <pre><code>//getter
|
|
|
320 var containment = $( ".selector" ).sortable( "option", "containment" );
|
|
|
321 //setter
|
|
|
322 $( ".selector" ).sortable( "option", "containment", 'parent' );</code></pre>
|
|
|
323 </dd>
|
|
|
324
|
|
|
325 </dl>
|
|
|
326 </div>
|
|
|
327 </li>
|
|
|
328
|
|
|
329
|
|
|
330 <li class="option" id="option-cursor">
|
|
|
331 <div class="option-header">
|
|
|
332 <h3 class="option-name"><a href="#option-cursor">cursor</a></h3>
|
|
|
333 <dl>
|
|
|
334 <dt class="option-type-label">Type:</dt>
|
|
|
335 <dd class="option-type">String</dd>
|
|
|
336
|
|
|
337 <dt class="option-default-label">Default:</dt>
|
|
|
338 <dd class="option-default">'auto'</dd>
|
|
|
339
|
|
|
340 </dl>
|
|
|
341 </div>
|
|
|
342 <div class="option-description">
|
|
|
343 <p>Defines the cursor that is being shown while sorting.</p>
|
|
|
344 </div>
|
|
|
345 <div class="option-examples">
|
|
|
346 <h4>Code examples</h4>
|
|
|
347 <dl class="option-examples-list">
|
|
|
348
|
|
|
349 <dt>
|
|
|
350 Initialize a sortable with the <code>cursor</code> option specified.
|
|
|
351 </dt>
|
|
|
352 <dd>
|
|
|
353 <pre><code>$( ".selector" ).sortable({ cursor: 'crosshair' });</code></pre>
|
|
|
354 </dd>
|
|
|
355
|
|
|
356
|
|
|
357 <dt>
|
|
|
358 Get or set the <code>cursor</code> option, after init.
|
|
|
359 </dt>
|
|
|
360 <dd>
|
|
|
361 <pre><code>//getter
|
|
|
362 var cursor = $( ".selector" ).sortable( "option", "cursor" );
|
|
|
363 //setter
|
|
|
364 $( ".selector" ).sortable( "option", "cursor", 'crosshair' );</code></pre>
|
|
|
365 </dd>
|
|
|
366
|
|
|
367 </dl>
|
|
|
368 </div>
|
|
|
369 </li>
|
|
|
370
|
|
|
371
|
|
|
372 <li class="option" id="option-cursorAt">
|
|
|
373 <div class="option-header">
|
|
|
374 <h3 class="option-name"><a href="#option-cursorAt">cursorAt</a></h3>
|
|
|
375 <dl>
|
|
|
376 <dt class="option-type-label">Type:</dt>
|
|
|
377 <dd class="option-type">Object</dd>
|
|
|
378
|
|
|
379 <dt class="option-default-label">Default:</dt>
|
|
|
380 <dd class="option-default">false</dd>
|
|
|
381
|
|
|
382 </dl>
|
|
|
383 </div>
|
|
|
384 <div class="option-description">
|
|
|
385 <p>Moves the sorting element or helper so the cursor always appears to drag from the same position. Coordinates can be given as a hash using a combination of one or two keys: <code>{ top, left, right, bottom }</code>.</p>
|
|
|
386 </div>
|
|
|
387 <div class="option-examples">
|
|
|
388 <h4>Code examples</h4>
|
|
|
389 <dl class="option-examples-list">
|
|
|
390
|
|
|
391 <dt>
|
|
|
392 Initialize a sortable with the <code>cursorAt</code> option specified.
|
|
|
393 </dt>
|
|
|
394 <dd>
|
|
|
395 <pre><code>$( ".selector" ).sortable({ cursorAt: 'top' });</code></pre>
|
|
|
396 </dd>
|
|
|
397
|
|
|
398
|
|
|
399 <dt>
|
|
|
400 Get or set the <code>cursorAt</code> option, after init.
|
|
|
401 </dt>
|
|
|
402 <dd>
|
|
|
403 <pre><code>//getter
|
|
|
404 var cursorAt = $( ".selector" ).sortable( "option", "cursorAt" );
|
|
|
405 //setter
|
|
|
406 $( ".selector" ).sortable( "option", "cursorAt", 'top' );</code></pre>
|
|
|
407 </dd>
|
|
|
408
|
|
|
409 </dl>
|
|
|
410 </div>
|
|
|
411 </li>
|
|
|
412
|
|
|
413
|
|
|
414 <li class="option" id="option-delay">
|
|
|
415 <div class="option-header">
|
|
|
416 <h3 class="option-name"><a href="#option-delay">delay</a></h3>
|
|
|
417 <dl>
|
|
|
418 <dt class="option-type-label">Type:</dt>
|
|
|
419 <dd class="option-type">Integer</dd>
|
|
|
420
|
|
|
421 <dt class="option-default-label">Default:</dt>
|
|
|
422 <dd class="option-default">0</dd>
|
|
|
423
|
|
|
424 </dl>
|
|
|
425 </div>
|
|
|
426 <div class="option-description">
|
|
|
427 <p>Time in milliseconds to define when the sorting should start. It helps preventing unwanted drags when clicking on an element.</p>
|
|
|
428 </div>
|
|
|
429 <div class="option-examples">
|
|
|
430 <h4>Code examples</h4>
|
|
|
431 <dl class="option-examples-list">
|
|
|
432
|
|
|
433 <dt>
|
|
|
434 Initialize a sortable with the <code>delay</code> option specified.
|
|
|
435 </dt>
|
|
|
436 <dd>
|
|
|
437 <pre><code>$( ".selector" ).sortable({ delay: 500 });</code></pre>
|
|
|
438 </dd>
|
|
|
439
|
|
|
440
|
|
|
441 <dt>
|
|
|
442 Get or set the <code>delay</code> option, after init.
|
|
|
443 </dt>
|
|
|
444 <dd>
|
|
|
445 <pre><code>//getter
|
|
|
446 var delay = $( ".selector" ).sortable( "option", "delay" );
|
|
|
447 //setter
|
|
|
448 $( ".selector" ).sortable( "option", "delay", 500 );</code></pre>
|
|
|
449 </dd>
|
|
|
450
|
|
|
451 </dl>
|
|
|
452 </div>
|
|
|
453 </li>
|
|
|
454
|
|
|
455
|
|
|
456 <li class="option" id="option-distance">
|
|
|
457 <div class="option-header">
|
|
|
458 <h3 class="option-name"><a href="#option-distance">distance</a></h3>
|
|
|
459 <dl>
|
|
|
460 <dt class="option-type-label">Type:</dt>
|
|
|
461 <dd class="option-type">Integer</dd>
|
|
|
462
|
|
|
463 <dt class="option-default-label">Default:</dt>
|
|
|
464 <dd class="option-default">1</dd>
|
|
|
465
|
|
|
466 </dl>
|
|
|
467 </div>
|
|
|
468 <div class="option-description">
|
|
|
469 <p>Tolerance, in pixels, for when sorting should start. If specified, sorting will not start until after mouse is dragged beyond distance. Can be used to allow for clicks on elements within a handle.</p>
|
|
|
470 </div>
|
|
|
471 <div class="option-examples">
|
|
|
472 <h4>Code examples</h4>
|
|
|
473 <dl class="option-examples-list">
|
|
|
474
|
|
|
475 <dt>
|
|
|
476 Initialize a sortable with the <code>distance</code> option specified.
|
|
|
477 </dt>
|
|
|
478 <dd>
|
|
|
479 <pre><code>$( ".selector" ).sortable({ distance: 30 });</code></pre>
|
|
|
480 </dd>
|
|
|
481
|
|
|
482
|
|
|
483 <dt>
|
|
|
484 Get or set the <code>distance</code> option, after init.
|
|
|
485 </dt>
|
|
|
486 <dd>
|
|
|
487 <pre><code>//getter
|
|
|
488 var distance = $( ".selector" ).sortable( "option", "distance" );
|
|
|
489 //setter
|
|
|
490 $( ".selector" ).sortable( "option", "distance", 30 );</code></pre>
|
|
|
491 </dd>
|
|
|
492
|
|
|
493 </dl>
|
|
|
494 </div>
|
|
|
495 </li>
|
|
|
496
|
|
|
497
|
|
|
498 <li class="option" id="option-dropOnEmpty">
|
|
|
499 <div class="option-header">
|
|
|
500 <h3 class="option-name"><a href="#option-dropOnEmpty">dropOnEmpty</a></h3>
|
|
|
501 <dl>
|
|
|
502 <dt class="option-type-label">Type:</dt>
|
|
|
503 <dd class="option-type">Boolean</dd>
|
|
|
504
|
|
|
505 <dt class="option-default-label">Default:</dt>
|
|
|
506 <dd class="option-default">true</dd>
|
|
|
507
|
|
|
508 </dl>
|
|
|
509 </div>
|
|
|
510 <div class="option-description">
|
|
|
511 <p>If false items from this sortable can't be dropped to an empty linked sortable.</p>
|
|
|
512 </div>
|
|
|
513 <div class="option-examples">
|
|
|
514 <h4>Code examples</h4>
|
|
|
515 <dl class="option-examples-list">
|
|
|
516
|
|
|
517 <dt>
|
|
|
518 Initialize a sortable with the <code>dropOnEmpty</code> option specified.
|
|
|
519 </dt>
|
|
|
520 <dd>
|
|
|
521 <pre><code>$( ".selector" ).sortable({ dropOnEmpty: false });</code></pre>
|
|
|
522 </dd>
|
|
|
523
|
|
|
524
|
|
|
525 <dt>
|
|
|
526 Get or set the <code>dropOnEmpty</code> option, after init.
|
|
|
527 </dt>
|
|
|
528 <dd>
|
|
|
529 <pre><code>//getter
|
|
|
530 var dropOnEmpty = $( ".selector" ).sortable( "option", "dropOnEmpty" );
|
|
|
531 //setter
|
|
|
532 $( ".selector" ).sortable( "option", "dropOnEmpty", false );</code></pre>
|
|
|
533 </dd>
|
|
|
534
|
|
|
535 </dl>
|
|
|
536 </div>
|
|
|
537 </li>
|
|
|
538
|
|
|
539
|
|
|
540 <li class="option" id="option-forceHelperSize">
|
|
|
541 <div class="option-header">
|
|
|
542 <h3 class="option-name"><a href="#option-forceHelperSize">forceHelperSize</a></h3>
|
|
|
543 <dl>
|
|
|
544 <dt class="option-type-label">Type:</dt>
|
|
|
545 <dd class="option-type">Boolean</dd>
|
|
|
546
|
|
|
547 <dt class="option-default-label">Default:</dt>
|
|
|
548 <dd class="option-default">false</dd>
|
|
|
549
|
|
|
550 </dl>
|
|
|
551 </div>
|
|
|
552 <div class="option-description">
|
|
|
553 <p>If true, forces the helper to have a size.</p>
|
|
|
554 </div>
|
|
|
555 <div class="option-examples">
|
|
|
556 <h4>Code examples</h4>
|
|
|
557 <dl class="option-examples-list">
|
|
|
558
|
|
|
559 <dt>
|
|
|
560 Initialize a sortable with the <code>forceHelperSize</code> option specified.
|
|
|
561 </dt>
|
|
|
562 <dd>
|
|
|
563 <pre><code>$( ".selector" ).sortable({ forceHelperSize: true });</code></pre>
|
|
|
564 </dd>
|
|
|
565
|
|
|
566
|
|
|
567 <dt>
|
|
|
568 Get or set the <code>forceHelperSize</code> option, after init.
|
|
|
569 </dt>
|
|
|
570 <dd>
|
|
|
571 <pre><code>//getter
|
|
|
572 var forceHelperSize = $( ".selector" ).sortable( "option", "forceHelperSize" );
|
|
|
573 //setter
|
|
|
574 $( ".selector" ).sortable( "option", "forceHelperSize", true );</code></pre>
|
|
|
575 </dd>
|
|
|
576
|
|
|
577 </dl>
|
|
|
578 </div>
|
|
|
579 </li>
|
|
|
580
|
|
|
581
|
|
|
582 <li class="option" id="option-forcePlaceholderSize">
|
|
|
583 <div class="option-header">
|
|
|
584 <h3 class="option-name"><a href="#option-forcePlaceholderSize">forcePlaceholderSize</a></h3>
|
|
|
585 <dl>
|
|
|
586 <dt class="option-type-label">Type:</dt>
|
|
|
587 <dd class="option-type">Boolean</dd>
|
|
|
588
|
|
|
589 <dt class="option-default-label">Default:</dt>
|
|
|
590 <dd class="option-default">false</dd>
|
|
|
591
|
|
|
592 </dl>
|
|
|
593 </div>
|
|
|
594 <div class="option-description">
|
|
|
595 <p>If true, forces the placeholder to have a size.</p>
|
|
|
596 </div>
|
|
|
597 <div class="option-examples">
|
|
|
598 <h4>Code examples</h4>
|
|
|
599 <dl class="option-examples-list">
|
|
|
600
|
|
|
601 <dt>
|
|
|
602 Initialize a sortable with the <code>forcePlaceholderSize</code> option specified.
|
|
|
603 </dt>
|
|
|
604 <dd>
|
|
|
605 <pre><code>$( ".selector" ).sortable({ forcePlaceholderSize: true });</code></pre>
|
|
|
606 </dd>
|
|
|
607
|
|
|
608
|
|
|
609 <dt>
|
|
|
610 Get or set the <code>forcePlaceholderSize</code> option, after init.
|
|
|
611 </dt>
|
|
|
612 <dd>
|
|
|
613 <pre><code>//getter
|
|
|
614 var forcePlaceholderSize = $( ".selector" ).sortable( "option", "forcePlaceholderSize" );
|
|
|
615 //setter
|
|
|
616 $( ".selector" ).sortable( "option", "forcePlaceholderSize", true );</code></pre>
|
|
|
617 </dd>
|
|
|
618
|
|
|
619 </dl>
|
|
|
620 </div>
|
|
|
621 </li>
|
|
|
622
|
|
|
623
|
|
|
624 <li class="option" id="option-grid">
|
|
|
625 <div class="option-header">
|
|
|
626 <h3 class="option-name"><a href="#option-grid">grid</a></h3>
|
|
|
627 <dl>
|
|
|
628 <dt class="option-type-label">Type:</dt>
|
|
|
629 <dd class="option-type">Array</dd>
|
|
|
630
|
|
|
631 <dt class="option-default-label">Default:</dt>
|
|
|
632 <dd class="option-default">false</dd>
|
|
|
633
|
|
|
634 </dl>
|
|
|
635 </div>
|
|
|
636 <div class="option-description">
|
|
|
637 <p>Snaps the sorting element or helper to a grid, every x and y pixels. Array values: [x, y]</p>
|
|
|
638 </div>
|
|
|
639 <div class="option-examples">
|
|
|
640 <h4>Code examples</h4>
|
|
|
641 <dl class="option-examples-list">
|
|
|
642
|
|
|
643 <dt>
|
|
|
644 Initialize a sortable with the <code>grid</code> option specified.
|
|
|
645 </dt>
|
|
|
646 <dd>
|
|
|
647 <pre><code>$( ".selector" ).sortable({ grid: [50, 20] });</code></pre>
|
|
|
648 </dd>
|
|
|
649
|
|
|
650
|
|
|
651 <dt>
|
|
|
652 Get or set the <code>grid</code> option, after init.
|
|
|
653 </dt>
|
|
|
654 <dd>
|
|
|
655 <pre><code>//getter
|
|
|
656 var grid = $( ".selector" ).sortable( "option", "grid" );
|
|
|
657 //setter
|
|
|
658 $( ".selector" ).sortable( "option", "grid", [50, 20] );</code></pre>
|
|
|
659 </dd>
|
|
|
660
|
|
|
661 </dl>
|
|
|
662 </div>
|
|
|
663 </li>
|
|
|
664
|
|
|
665
|
|
|
666 <li class="option" id="option-handle">
|
|
|
667 <div class="option-header">
|
|
|
668 <h3 class="option-name"><a href="#option-handle">handle</a></h3>
|
|
|
669 <dl>
|
|
|
670 <dt class="option-type-label">Type:</dt>
|
|
|
671 <dd class="option-type">Selector, Element</dd>
|
|
|
672
|
|
|
673 <dt class="option-default-label">Default:</dt>
|
|
|
674 <dd class="option-default">false</dd>
|
|
|
675
|
|
|
676 </dl>
|
|
|
677 </div>
|
|
|
678 <div class="option-description">
|
|
|
679 <p>Restricts sort start click to the specified element.</p>
|
|
|
680 </div>
|
|
|
681 <div class="option-examples">
|
|
|
682 <h4>Code examples</h4>
|
|
|
683 <dl class="option-examples-list">
|
|
|
684
|
|
|
685 <dt>
|
|
|
686 Initialize a sortable with the <code>handle</code> option specified.
|
|
|
687 </dt>
|
|
|
688 <dd>
|
|
|
689 <pre><code>$( ".selector" ).sortable({ handle: 'h2' });</code></pre>
|
|
|
690 </dd>
|
|
|
691
|
|
|
692
|
|
|
693 <dt>
|
|
|
694 Get or set the <code>handle</code> option, after init.
|
|
|
695 </dt>
|
|
|
696 <dd>
|
|
|
697 <pre><code>//getter
|
|
|
698 var handle = $( ".selector" ).sortable( "option", "handle" );
|
|
|
699 //setter
|
|
|
700 $( ".selector" ).sortable( "option", "handle", 'h2' );</code></pre>
|
|
|
701 </dd>
|
|
|
702
|
|
|
703 </dl>
|
|
|
704 </div>
|
|
|
705 </li>
|
|
|
706
|
|
|
707
|
|
|
708 <li class="option" id="option-helper">
|
|
|
709 <div class="option-header">
|
|
|
710 <h3 class="option-name"><a href="#option-helper">helper</a></h3>
|
|
|
711 <dl>
|
|
|
712 <dt class="option-type-label">Type:</dt>
|
|
|
713 <dd class="option-type">String, Function</dd>
|
|
|
714
|
|
|
715 <dt class="option-default-label">Default:</dt>
|
|
|
716 <dd class="option-default">'original'</dd>
|
|
|
717
|
|
|
718 </dl>
|
|
|
719 </div>
|
|
|
720 <div class="option-description">
|
|
|
721 <p>Allows for a helper element to be used for dragging display. The supplied function receives the event and the element being sorted, and should return a DOMElement to be used as a custom proxy helper. Possible values: 'original', 'clone'</p>
|
|
|
722 </div>
|
|
|
723 <div class="option-examples">
|
|
|
724 <h4>Code examples</h4>
|
|
|
725 <dl class="option-examples-list">
|
|
|
726
|
|
|
727 <dt>
|
|
|
728 Initialize a sortable with the <code>helper</code> option specified.
|
|
|
729 </dt>
|
|
|
730 <dd>
|
|
|
731 <pre><code>$( ".selector" ).sortable({ helper: 'clone' });</code></pre>
|
|
|
732 </dd>
|
|
|
733
|
|
|
734
|
|
|
735 <dt>
|
|
|
736 Get or set the <code>helper</code> option, after init.
|
|
|
737 </dt>
|
|
|
738 <dd>
|
|
|
739 <pre><code>//getter
|
|
|
740 var helper = $( ".selector" ).sortable( "option", "helper" );
|
|
|
741 //setter
|
|
|
742 $( ".selector" ).sortable( "option", "helper", 'clone' );</code></pre>
|
|
|
743 </dd>
|
|
|
744
|
|
|
745 </dl>
|
|
|
746 </div>
|
|
|
747 </li>
|
|
|
748
|
|
|
749
|
|
|
750 <li class="option" id="option-items">
|
|
|
751 <div class="option-header">
|
|
|
752 <h3 class="option-name"><a href="#option-items">items</a></h3>
|
|
|
753 <dl>
|
|
|
754 <dt class="option-type-label">Type:</dt>
|
|
|
755 <dd class="option-type">Selector</dd>
|
|
|
756
|
|
|
757 <dt class="option-default-label">Default:</dt>
|
|
|
758 <dd class="option-default">'> *'</dd>
|
|
|
759
|
|
|
760 </dl>
|
|
|
761 </div>
|
|
|
762 <div class="option-description">
|
|
|
763 <p>Specifies which items inside the element should be sortable.</p>
|
|
|
764 </div>
|
|
|
765 <div class="option-examples">
|
|
|
766 <h4>Code examples</h4>
|
|
|
767 <dl class="option-examples-list">
|
|
|
768
|
|
|
769 <dt>
|
|
|
770 Initialize a sortable with the <code>items</code> option specified.
|
|
|
771 </dt>
|
|
|
772 <dd>
|
|
|
773 <pre><code>$( ".selector" ).sortable({ items: 'li' });</code></pre>
|
|
|
774 </dd>
|
|
|
775
|
|
|
776
|
|
|
777 <dt>
|
|
|
778 Get or set the <code>items</code> option, after init.
|
|
|
779 </dt>
|
|
|
780 <dd>
|
|
|
781 <pre><code>//getter
|
|
|
782 var items = $( ".selector" ).sortable( "option", "items" );
|
|
|
783 //setter
|
|
|
784 $( ".selector" ).sortable( "option", "items", 'li' );</code></pre>
|
|
|
785 </dd>
|
|
|
786
|
|
|
787 </dl>
|
|
|
788 </div>
|
|
|
789 </li>
|
|
|
790
|
|
|
791
|
|
|
792 <li class="option" id="option-opacity">
|
|
|
793 <div class="option-header">
|
|
|
794 <h3 class="option-name"><a href="#option-opacity">opacity</a></h3>
|
|
|
795 <dl>
|
|
|
796 <dt class="option-type-label">Type:</dt>
|
|
|
797 <dd class="option-type">Float</dd>
|
|
|
798
|
|
|
799 <dt class="option-default-label">Default:</dt>
|
|
|
800 <dd class="option-default">false</dd>
|
|
|
801
|
|
|
802 </dl>
|
|
|
803 </div>
|
|
|
804 <div class="option-description">
|
|
|
805 <p>Defines the opacity of the helper while sorting. From 0.01 to 1</p>
|
|
|
806 </div>
|
|
|
807 <div class="option-examples">
|
|
|
808 <h4>Code examples</h4>
|
|
|
809 <dl class="option-examples-list">
|
|
|
810
|
|
|
811 <dt>
|
|
|
812 Initialize a sortable with the <code>opacity</code> option specified.
|
|
|
813 </dt>
|
|
|
814 <dd>
|
|
|
815 <pre><code>$( ".selector" ).sortable({ opacity: 0.6 });</code></pre>
|
|
|
816 </dd>
|
|
|
817
|
|
|
818
|
|
|
819 <dt>
|
|
|
820 Get or set the <code>opacity</code> option, after init.
|
|
|
821 </dt>
|
|
|
822 <dd>
|
|
|
823 <pre><code>//getter
|
|
|
824 var opacity = $( ".selector" ).sortable( "option", "opacity" );
|
|
|
825 //setter
|
|
|
826 $( ".selector" ).sortable( "option", "opacity", 0.6 );</code></pre>
|
|
|
827 </dd>
|
|
|
828
|
|
|
829 </dl>
|
|
|
830 </div>
|
|
|
831 </li>
|
|
|
832
|
|
|
833
|
|
|
834 <li class="option" id="option-placeholder">
|
|
|
835 <div class="option-header">
|
|
|
836 <h3 class="option-name"><a href="#option-placeholder">placeholder</a></h3>
|
|
|
837 <dl>
|
|
|
838 <dt class="option-type-label">Type:</dt>
|
|
|
839 <dd class="option-type">String</dd>
|
|
|
840
|
|
|
841 <dt class="option-default-label">Default:</dt>
|
|
|
842 <dd class="option-default">false</dd>
|
|
|
843
|
|
|
844 </dl>
|
|
|
845 </div>
|
|
|
846 <div class="option-description">
|
|
|
847 <p>Class that gets applied to the otherwise white space.</p>
|
|
|
848 </div>
|
|
|
849 <div class="option-examples">
|
|
|
850 <h4>Code examples</h4>
|
|
|
851 <dl class="option-examples-list">
|
|
|
852
|
|
|
853 <dt>
|
|
|
854 Initialize a sortable with the <code>placeholder</code> option specified.
|
|
|
855 </dt>
|
|
|
856 <dd>
|
|
|
857 <pre><code>$( ".selector" ).sortable({ placeholder: 'ui-state-highlight' });</code></pre>
|
|
|
858 </dd>
|
|
|
859
|
|
|
860
|
|
|
861 <dt>
|
|
|
862 Get or set the <code>placeholder</code> option, after init.
|
|
|
863 </dt>
|
|
|
864 <dd>
|
|
|
865 <pre><code>//getter
|
|
|
866 var placeholder = $( ".selector" ).sortable( "option", "placeholder" );
|
|
|
867 //setter
|
|
|
868 $( ".selector" ).sortable( "option", "placeholder", 'ui-state-highlight' );</code></pre>
|
|
|
869 </dd>
|
|
|
870
|
|
|
871 </dl>
|
|
|
872 </div>
|
|
|
873 </li>
|
|
|
874
|
|
|
875
|
|
|
876 <li class="option" id="option-revert">
|
|
|
877 <div class="option-header">
|
|
|
878 <h3 class="option-name"><a href="#option-revert">revert</a></h3>
|
|
|
879 <dl>
|
|
|
880 <dt class="option-type-label">Type:</dt>
|
|
|
881 <dd class="option-type">Boolean/Integer</dd>
|
|
|
882
|
|
|
883 <dt class="option-default-label">Default:</dt>
|
|
|
884 <dd class="option-default">false</dd>
|
|
|
885
|
|
|
886 </dl>
|
|
|
887 </div>
|
|
|
888 <div class="option-description">
|
|
|
889 <p>If set to true, the item will be reverted to its new DOM position with a smooth animation. Optionally, it can also be set to a number that controls the duration of the animation in ms.</p>
|
|
|
890 </div>
|
|
|
891 <div class="option-examples">
|
|
|
892 <h4>Code examples</h4>
|
|
|
893 <dl class="option-examples-list">
|
|
|
894
|
|
|
895 <dt>
|
|
|
896 Initialize a sortable with the <code>revert</code> option specified.
|
|
|
897 </dt>
|
|
|
898 <dd>
|
|
|
899 <pre><code>$( ".selector" ).sortable({ revert: true });</code></pre>
|
|
|
900 </dd>
|
|
|
901
|
|
|
902
|
|
|
903 <dt>
|
|
|
904 Get or set the <code>revert</code> option, after init.
|
|
|
905 </dt>
|
|
|
906 <dd>
|
|
|
907 <pre><code>//getter
|
|
|
908 var revert = $( ".selector" ).sortable( "option", "revert" );
|
|
|
909 //setter
|
|
|
910 $( ".selector" ).sortable( "option", "revert", true );</code></pre>
|
|
|
911 </dd>
|
|
|
912
|
|
|
913 </dl>
|
|
|
914 </div>
|
|
|
915 </li>
|
|
|
916
|
|
|
917
|
|
|
918 <li class="option" id="option-scroll">
|
|
|
919 <div class="option-header">
|
|
|
920 <h3 class="option-name"><a href="#option-scroll">scroll</a></h3>
|
|
|
921 <dl>
|
|
|
922 <dt class="option-type-label">Type:</dt>
|
|
|
923 <dd class="option-type">Boolean</dd>
|
|
|
924
|
|
|
925 <dt class="option-default-label">Default:</dt>
|
|
|
926 <dd class="option-default">true</dd>
|
|
|
927
|
|
|
928 </dl>
|
|
|
929 </div>
|
|
|
930 <div class="option-description">
|
|
|
931 <p>If set to true, the page scrolls when coming to an edge.</p>
|
|
|
932 </div>
|
|
|
933 <div class="option-examples">
|
|
|
934 <h4>Code examples</h4>
|
|
|
935 <dl class="option-examples-list">
|
|
|
936
|
|
|
937 <dt>
|
|
|
938 Initialize a sortable with the <code>scroll</code> option specified.
|
|
|
939 </dt>
|
|
|
940 <dd>
|
|
|
941 <pre><code>$( ".selector" ).sortable({ scroll: false });</code></pre>
|
|
|
942 </dd>
|
|
|
943
|
|
|
944
|
|
|
945 <dt>
|
|
|
946 Get or set the <code>scroll</code> option, after init.
|
|
|
947 </dt>
|
|
|
948 <dd>
|
|
|
949 <pre><code>//getter
|
|
|
950 var scroll = $( ".selector" ).sortable( "option", "scroll" );
|
|
|
951 //setter
|
|
|
952 $( ".selector" ).sortable( "option", "scroll", false );</code></pre>
|
|
|
953 </dd>
|
|
|
954
|
|
|
955 </dl>
|
|
|
956 </div>
|
|
|
957 </li>
|
|
|
958
|
|
|
959
|
|
|
960 <li class="option" id="option-scrollSensitivity">
|
|
|
961 <div class="option-header">
|
|
|
962 <h3 class="option-name"><a href="#option-scrollSensitivity">scrollSensitivity</a></h3>
|
|
|
963 <dl>
|
|
|
964 <dt class="option-type-label">Type:</dt>
|
|
|
965 <dd class="option-type">Integer</dd>
|
|
|
966
|
|
|
967 <dt class="option-default-label">Default:</dt>
|
|
|
968 <dd class="option-default">20</dd>
|
|
|
969
|
|
|
970 </dl>
|
|
|
971 </div>
|
|
|
972 <div class="option-description">
|
|
|
973 <p>Defines how near the mouse must be to an edge to start scrolling.</p>
|
|
|
974 </div>
|
|
|
975 <div class="option-examples">
|
|
|
976 <h4>Code examples</h4>
|
|
|
977 <dl class="option-examples-list">
|
|
|
978
|
|
|
979 <dt>
|
|
|
980 Initialize a sortable with the <code>scrollSensitivity</code> option specified.
|
|
|
981 </dt>
|
|
|
982 <dd>
|
|
|
983 <pre><code>$( ".selector" ).sortable({ scrollSensitivity: 40 });</code></pre>
|
|
|
984 </dd>
|
|
|
985
|
|
|
986
|
|
|
987 <dt>
|
|
|
988 Get or set the <code>scrollSensitivity</code> option, after init.
|
|
|
989 </dt>
|
|
|
990 <dd>
|
|
|
991 <pre><code>//getter
|
|
|
992 var scrollSensitivity = $( ".selector" ).sortable( "option", "scrollSensitivity" );
|
|
|
993 //setter
|
|
|
994 $( ".selector" ).sortable( "option", "scrollSensitivity", 40 );</code></pre>
|
|
|
995 </dd>
|
|
|
996
|
|
|
997 </dl>
|
|
|
998 </div>
|
|
|
999 </li>
|
|
|
1000
|
|
|
1001
|
|
|
1002 <li class="option" id="option-scrollSpeed">
|
|
|
1003 <div class="option-header">
|
|
|
1004 <h3 class="option-name"><a href="#option-scrollSpeed">scrollSpeed</a></h3>
|
|
|
1005 <dl>
|
|
|
1006 <dt class="option-type-label">Type:</dt>
|
|
|
1007 <dd class="option-type">Integer</dd>
|
|
|
1008
|
|
|
1009 <dt class="option-default-label">Default:</dt>
|
|
|
1010 <dd class="option-default">20</dd>
|
|
|
1011
|
|
|
1012 </dl>
|
|
|
1013 </div>
|
|
|
1014 <div class="option-description">
|
|
|
1015 <p>The speed at which the window should scroll once the mouse pointer gets within the scrollSensitivity distance.</p>
|
|
|
1016 </div>
|
|
|
1017 <div class="option-examples">
|
|
|
1018 <h4>Code examples</h4>
|
|
|
1019 <dl class="option-examples-list">
|
|
|
1020
|
|
|
1021 <dt>
|
|
|
1022 Initialize a sortable with the <code>scrollSpeed</code> option specified.
|
|
|
1023 </dt>
|
|
|
1024 <dd>
|
|
|
1025 <pre><code>$( ".selector" ).sortable({ scrollSpeed: 40 });</code></pre>
|
|
|
1026 </dd>
|
|
|
1027
|
|
|
1028
|
|
|
1029 <dt>
|
|
|
1030 Get or set the <code>scrollSpeed</code> option, after init.
|
|
|
1031 </dt>
|
|
|
1032 <dd>
|
|
|
1033 <pre><code>//getter
|
|
|
1034 var scrollSpeed = $( ".selector" ).sortable( "option", "scrollSpeed" );
|
|
|
1035 //setter
|
|
|
1036 $( ".selector" ).sortable( "option", "scrollSpeed", 40 );</code></pre>
|
|
|
1037 </dd>
|
|
|
1038
|
|
|
1039 </dl>
|
|
|
1040 </div>
|
|
|
1041 </li>
|
|
|
1042
|
|
|
1043
|
|
|
1044 <li class="option" id="option-tolerance">
|
|
|
1045 <div class="option-header">
|
|
|
1046 <h3 class="option-name"><a href="#option-tolerance">tolerance</a></h3>
|
|
|
1047 <dl>
|
|
|
1048 <dt class="option-type-label">Type:</dt>
|
|
|
1049 <dd class="option-type">String</dd>
|
|
|
1050
|
|
|
1051 <dt class="option-default-label">Default:</dt>
|
|
|
1052 <dd class="option-default">'intersect'</dd>
|
|
|
1053
|
|
|
1054 </dl>
|
|
|
1055 </div>
|
|
|
1056 <div class="option-description">
|
|
|
1057 <p>This is the way the reordering behaves during drag. Possible values: 'intersect', 'pointer'. In some setups, 'pointer' is more natural.
|
|
|
1058 </p>
|
|
|
1059 <ul>
|
|
|
1060 <li><b>intersect</b>: draggable overlaps the droppable at least 50%</li>
|
|
|
1061 <li><b>pointer</b>: mouse pointer overlaps the droppable</li>
|
|
|
1062 </ul>
|
|
|
1063 <p></p>
|
|
|
1064 </div>
|
|
|
1065 <div class="option-examples">
|
|
|
1066 <h4>Code examples</h4>
|
|
|
1067 <dl class="option-examples-list">
|
|
|
1068
|
|
|
1069 <dt>
|
|
|
1070 Initialize a sortable with the <code>tolerance</code> option specified.
|
|
|
1071 </dt>
|
|
|
1072 <dd>
|
|
|
1073 <pre><code>$( ".selector" ).sortable({ tolerance: 'pointer' });</code></pre>
|
|
|
1074 </dd>
|
|
|
1075
|
|
|
1076
|
|
|
1077 <dt>
|
|
|
1078 Get or set the <code>tolerance</code> option, after init.
|
|
|
1079 </dt>
|
|
|
1080 <dd>
|
|
|
1081 <pre><code>//getter
|
|
|
1082 var tolerance = $( ".selector" ).sortable( "option", "tolerance" );
|
|
|
1083 //setter
|
|
|
1084 $( ".selector" ).sortable( "option", "tolerance", 'pointer' );</code></pre>
|
|
|
1085 </dd>
|
|
|
1086
|
|
|
1087 </dl>
|
|
|
1088 </div>
|
|
|
1089 </li>
|
|
|
1090
|
|
|
1091
|
|
|
1092 <li class="option" id="option-zIndex">
|
|
|
1093 <div class="option-header">
|
|
|
1094 <h3 class="option-name"><a href="#option-zIndex">zIndex</a></h3>
|
|
|
1095 <dl>
|
|
|
1096 <dt class="option-type-label">Type:</dt>
|
|
|
1097 <dd class="option-type">Integer</dd>
|
|
|
1098
|
|
|
1099 <dt class="option-default-label">Default:</dt>
|
|
|
1100 <dd class="option-default">1000</dd>
|
|
|
1101
|
|
|
1102 </dl>
|
|
|
1103 </div>
|
|
|
1104 <div class="option-description">
|
|
|
1105 <p>Z-index for element/helper while being sorted.</p>
|
|
|
1106 </div>
|
|
|
1107 <div class="option-examples">
|
|
|
1108 <h4>Code examples</h4>
|
|
|
1109 <dl class="option-examples-list">
|
|
|
1110
|
|
|
1111 <dt>
|
|
|
1112 Initialize a sortable with the <code>zIndex</code> option specified.
|
|
|
1113 </dt>
|
|
|
1114 <dd>
|
|
|
1115 <pre><code>$( ".selector" ).sortable({ zIndex: 5 });</code></pre>
|
|
|
1116 </dd>
|
|
|
1117
|
|
|
1118
|
|
|
1119 <dt>
|
|
|
1120 Get or set the <code>zIndex</code> option, after init.
|
|
|
1121 </dt>
|
|
|
1122 <dd>
|
|
|
1123 <pre><code>//getter
|
|
|
1124 var zIndex = $( ".selector" ).sortable( "option", "zIndex" );
|
|
|
1125 //setter
|
|
|
1126 $( ".selector" ).sortable( "option", "zIndex", 5 );</code></pre>
|
|
|
1127 </dd>
|
|
|
1128
|
|
|
1129 </dl>
|
|
|
1130 </div>
|
|
|
1131 </li>
|
|
|
1132
|
|
|
1133 </ul>
|
|
|
1134 </div>
|
|
|
1135 <div id="events">
|
|
|
1136 <h2 class="top-header">Events</h2>
|
|
|
1137 <ul class="events-list">
|
|
|
1138
|
|
|
1139 <li class="event" id="event-create">
|
|
|
1140 <div class="event-header">
|
|
|
1141 <h3 class="event-name"><a href="#event-create">create</a></h3>
|
|
|
1142 <dl>
|
|
|
1143 <dt class="event-type-label">Type:</dt>
|
|
|
1144 <dd class="event-type">sortcreate</dd>
|
|
|
1145 </dl>
|
|
|
1146 </div>
|
|
|
1147 <div class="event-description">
|
|
|
1148 <p>This event is triggered when sortable is created.</p>
|
|
|
1149 </div>
|
|
|
1150 <div class="event-examples">
|
|
|
1151 <h4>Code examples</h4>
|
|
|
1152 <dl class="event-examples-list">
|
|
|
1153
|
|
|
1154 <dt>
|
|
|
1155 Supply a callback function to handle the <code>create</code> event as an init option.
|
|
|
1156 </dt>
|
|
|
1157 <dd>
|
|
|
1158 <pre><code>$( ".selector" ).sortable({
|
|
|
1159 create: function(event, ui) { ... }
|
|
|
1160 });</code></pre>
|
|
|
1161 </dd>
|
|
|
1162
|
|
|
1163
|
|
|
1164 <dt>
|
|
|
1165 Bind to the <code>create</code> event by type: <code>sortcreate</code>.
|
|
|
1166 </dt>
|
|
|
1167 <dd>
|
|
|
1168 <pre><code>$( ".selector" ).bind( "sortcreate", function(event, ui) {
|
|
|
1169 ...
|
|
|
1170 });</code></pre>
|
|
|
1171 </dd>
|
|
|
1172
|
|
|
1173 </dl>
|
|
|
1174 </div>
|
|
|
1175 </li>
|
|
|
1176
|
|
|
1177
|
|
|
1178 <li class="event" id="event-start">
|
|
|
1179 <div class="event-header">
|
|
|
1180 <h3 class="event-name"><a href="#event-start">start</a></h3>
|
|
|
1181 <dl>
|
|
|
1182 <dt class="event-type-label">Type:</dt>
|
|
|
1183 <dd class="event-type">sortstart</dd>
|
|
|
1184 </dl>
|
|
|
1185 </div>
|
|
|
1186 <div class="event-description">
|
|
|
1187 <p>This event is triggered when sorting starts.</p>
|
|
|
1188 </div>
|
|
|
1189 <div class="event-examples">
|
|
|
1190 <h4>Code examples</h4>
|
|
|
1191 <dl class="event-examples-list">
|
|
|
1192
|
|
|
1193 <dt>
|
|
|
1194 Supply a callback function to handle the <code>start</code> event as an init option.
|
|
|
1195 </dt>
|
|
|
1196 <dd>
|
|
|
1197 <pre><code>$( ".selector" ).sortable({
|
|
|
1198 start: function(event, ui) { ... }
|
|
|
1199 });</code></pre>
|
|
|
1200 </dd>
|
|
|
1201
|
|
|
1202
|
|
|
1203 <dt>
|
|
|
1204 Bind to the <code>start</code> event by type: <code>sortstart</code>.
|
|
|
1205 </dt>
|
|
|
1206 <dd>
|
|
|
1207 <pre><code>$( ".selector" ).bind( "sortstart", function(event, ui) {
|
|
|
1208 ...
|
|
|
1209 });</code></pre>
|
|
|
1210 </dd>
|
|
|
1211
|
|
|
1212 </dl>
|
|
|
1213 </div>
|
|
|
1214 </li>
|
|
|
1215
|
|
|
1216
|
|
|
1217 <li class="event" id="event-sort">
|
|
|
1218 <div class="event-header">
|
|
|
1219 <h3 class="event-name"><a href="#event-sort">sort</a></h3>
|
|
|
1220 <dl>
|
|
|
1221 <dt class="event-type-label">Type:</dt>
|
|
|
1222 <dd class="event-type">sort</dd>
|
|
|
1223 </dl>
|
|
|
1224 </div>
|
|
|
1225 <div class="event-description">
|
|
|
1226 <p>This event is triggered during sorting.</p>
|
|
|
1227 </div>
|
|
|
1228 <div class="event-examples">
|
|
|
1229 <h4>Code examples</h4>
|
|
|
1230 <dl class="event-examples-list">
|
|
|
1231
|
|
|
1232 <dt>
|
|
|
1233 Supply a callback function to handle the <code>sort</code> event as an init option.
|
|
|
1234 </dt>
|
|
|
1235 <dd>
|
|
|
1236 <pre><code>$( ".selector" ).sortable({
|
|
|
1237 sort: function(event, ui) { ... }
|
|
|
1238 });</code></pre>
|
|
|
1239 </dd>
|
|
|
1240
|
|
|
1241
|
|
|
1242 <dt>
|
|
|
1243 Bind to the <code>sort</code> event by type: <code>sort</code>.
|
|
|
1244 </dt>
|
|
|
1245 <dd>
|
|
|
1246 <pre><code>$( ".selector" ).bind( "sort", function(event, ui) {
|
|
|
1247 ...
|
|
|
1248 });</code></pre>
|
|
|
1249 </dd>
|
|
|
1250
|
|
|
1251 </dl>
|
|
|
1252 </div>
|
|
|
1253 </li>
|
|
|
1254
|
|
|
1255
|
|
|
1256 <li class="event" id="event-change">
|
|
|
1257 <div class="event-header">
|
|
|
1258 <h3 class="event-name"><a href="#event-change">change</a></h3>
|
|
|
1259 <dl>
|
|
|
1260 <dt class="event-type-label">Type:</dt>
|
|
|
1261 <dd class="event-type">sortchange</dd>
|
|
|
1262 </dl>
|
|
|
1263 </div>
|
|
|
1264 <div class="event-description">
|
|
|
1265 <p>This event is triggered during sorting, but only when the DOM position has changed.</p>
|
|
|
1266 </div>
|
|
|
1267 <div class="event-examples">
|
|
|
1268 <h4>Code examples</h4>
|
|
|
1269 <dl class="event-examples-list">
|
|
|
1270
|
|
|
1271 <dt>
|
|
|
1272 Supply a callback function to handle the <code>change</code> event as an init option.
|
|
|
1273 </dt>
|
|
|
1274 <dd>
|
|
|
1275 <pre><code>$( ".selector" ).sortable({
|
|
|
1276 change: function(event, ui) { ... }
|
|
|
1277 });</code></pre>
|
|
|
1278 </dd>
|
|
|
1279
|
|
|
1280
|
|
|
1281 <dt>
|
|
|
1282 Bind to the <code>change</code> event by type: <code>sortchange</code>.
|
|
|
1283 </dt>
|
|
|
1284 <dd>
|
|
|
1285 <pre><code>$( ".selector" ).bind( "sortchange", function(event, ui) {
|
|
|
1286 ...
|
|
|
1287 });</code></pre>
|
|
|
1288 </dd>
|
|
|
1289
|
|
|
1290 </dl>
|
|
|
1291 </div>
|
|
|
1292 </li>
|
|
|
1293
|
|
|
1294
|
|
|
1295 <li class="event" id="event-beforeStop">
|
|
|
1296 <div class="event-header">
|
|
|
1297 <h3 class="event-name"><a href="#event-beforeStop">beforeStop</a></h3>
|
|
|
1298 <dl>
|
|
|
1299 <dt class="event-type-label">Type:</dt>
|
|
|
1300 <dd class="event-type">sortbeforestop</dd>
|
|
|
1301 </dl>
|
|
|
1302 </div>
|
|
|
1303 <div class="event-description">
|
|
|
1304 <p>This event is triggered when sorting stops, but when the placeholder/helper is still available.</p>
|
|
|
1305 </div>
|
|
|
1306 <div class="event-examples">
|
|
|
1307 <h4>Code examples</h4>
|
|
|
1308 <dl class="event-examples-list">
|
|
|
1309
|
|
|
1310 <dt>
|
|
|
1311 Supply a callback function to handle the <code>beforeStop</code> event as an init option.
|
|
|
1312 </dt>
|
|
|
1313 <dd>
|
|
|
1314 <pre><code>$( ".selector" ).sortable({
|
|
|
1315 beforeStop: function(event, ui) { ... }
|
|
|
1316 });</code></pre>
|
|
|
1317 </dd>
|
|
|
1318
|
|
|
1319
|
|
|
1320 <dt>
|
|
|
1321 Bind to the <code>beforeStop</code> event by type: <code>sortbeforestop</code>.
|
|
|
1322 </dt>
|
|
|
1323 <dd>
|
|
|
1324 <pre><code>$( ".selector" ).bind( "sortbeforestop", function(event, ui) {
|
|
|
1325 ...
|
|
|
1326 });</code></pre>
|
|
|
1327 </dd>
|
|
|
1328
|
|
|
1329 </dl>
|
|
|
1330 </div>
|
|
|
1331 </li>
|
|
|
1332
|
|
|
1333
|
|
|
1334 <li class="event" id="event-stop">
|
|
|
1335 <div class="event-header">
|
|
|
1336 <h3 class="event-name"><a href="#event-stop">stop</a></h3>
|
|
|
1337 <dl>
|
|
|
1338 <dt class="event-type-label">Type:</dt>
|
|
|
1339 <dd class="event-type">sortstop</dd>
|
|
|
1340 </dl>
|
|
|
1341 </div>
|
|
|
1342 <div class="event-description">
|
|
|
1343 <p>This event is triggered when sorting has stopped.</p>
|
|
|
1344 </div>
|
|
|
1345 <div class="event-examples">
|
|
|
1346 <h4>Code examples</h4>
|
|
|
1347 <dl class="event-examples-list">
|
|
|
1348
|
|
|
1349 <dt>
|
|
|
1350 Supply a callback function to handle the <code>stop</code> event as an init option.
|
|
|
1351 </dt>
|
|
|
1352 <dd>
|
|
|
1353 <pre><code>$( ".selector" ).sortable({
|
|
|
1354 stop: function(event, ui) { ... }
|
|
|
1355 });</code></pre>
|
|
|
1356 </dd>
|
|
|
1357
|
|
|
1358
|
|
|
1359 <dt>
|
|
|
1360 Bind to the <code>stop</code> event by type: <code>sortstop</code>.
|
|
|
1361 </dt>
|
|
|
1362 <dd>
|
|
|
1363 <pre><code>$( ".selector" ).bind( "sortstop", function(event, ui) {
|
|
|
1364 ...
|
|
|
1365 });</code></pre>
|
|
|
1366 </dd>
|
|
|
1367
|
|
|
1368 </dl>
|
|
|
1369 </div>
|
|
|
1370 </li>
|
|
|
1371
|
|
|
1372
|
|
|
1373 <li class="event" id="event-update">
|
|
|
1374 <div class="event-header">
|
|
|
1375 <h3 class="event-name"><a href="#event-update">update</a></h3>
|
|
|
1376 <dl>
|
|
|
1377 <dt class="event-type-label">Type:</dt>
|
|
|
1378 <dd class="event-type">sortupdate</dd>
|
|
|
1379 </dl>
|
|
|
1380 </div>
|
|
|
1381 <div class="event-description">
|
|
|
1382 <p>This event is triggered when the user stopped sorting and the DOM position has changed.</p>
|
|
|
1383 </div>
|
|
|
1384 <div class="event-examples">
|
|
|
1385 <h4>Code examples</h4>
|
|
|
1386 <dl class="event-examples-list">
|
|
|
1387
|
|
|
1388 <dt>
|
|
|
1389 Supply a callback function to handle the <code>update</code> event as an init option.
|
|
|
1390 </dt>
|
|
|
1391 <dd>
|
|
|
1392 <pre><code>$( ".selector" ).sortable({
|
|
|
1393 update: function(event, ui) { ... }
|
|
|
1394 });</code></pre>
|
|
|
1395 </dd>
|
|
|
1396
|
|
|
1397
|
|
|
1398 <dt>
|
|
|
1399 Bind to the <code>update</code> event by type: <code>sortupdate</code>.
|
|
|
1400 </dt>
|
|
|
1401 <dd>
|
|
|
1402 <pre><code>$( ".selector" ).bind( "sortupdate", function(event, ui) {
|
|
|
1403 ...
|
|
|
1404 });</code></pre>
|
|
|
1405 </dd>
|
|
|
1406
|
|
|
1407 </dl>
|
|
|
1408 </div>
|
|
|
1409 </li>
|
|
|
1410
|
|
|
1411
|
|
|
1412 <li class="event" id="event-receive">
|
|
|
1413 <div class="event-header">
|
|
|
1414 <h3 class="event-name"><a href="#event-receive">receive</a></h3>
|
|
|
1415 <dl>
|
|
|
1416 <dt class="event-type-label">Type:</dt>
|
|
|
1417 <dd class="event-type">sortreceive</dd>
|
|
|
1418 </dl>
|
|
|
1419 </div>
|
|
|
1420 <div class="event-description">
|
|
|
1421 <p>This event is triggered when a connected sortable list has received an item from another list.</p>
|
|
|
1422 </div>
|
|
|
1423 <div class="event-examples">
|
|
|
1424 <h4>Code examples</h4>
|
|
|
1425 <dl class="event-examples-list">
|
|
|
1426
|
|
|
1427 <dt>
|
|
|
1428 Supply a callback function to handle the <code>receive</code> event as an init option.
|
|
|
1429 </dt>
|
|
|
1430 <dd>
|
|
|
1431 <pre><code>$( ".selector" ).sortable({
|
|
|
1432 receive: function(event, ui) { ... }
|
|
|
1433 });</code></pre>
|
|
|
1434 </dd>
|
|
|
1435
|
|
|
1436
|
|
|
1437 <dt>
|
|
|
1438 Bind to the <code>receive</code> event by type: <code>sortreceive</code>.
|
|
|
1439 </dt>
|
|
|
1440 <dd>
|
|
|
1441 <pre><code>$( ".selector" ).bind( "sortreceive", function(event, ui) {
|
|
|
1442 ...
|
|
|
1443 });</code></pre>
|
|
|
1444 </dd>
|
|
|
1445
|
|
|
1446 </dl>
|
|
|
1447 </div>
|
|
|
1448 </li>
|
|
|
1449
|
|
|
1450
|
|
|
1451 <li class="event" id="event-remove">
|
|
|
1452 <div class="event-header">
|
|
|
1453 <h3 class="event-name"><a href="#event-remove">remove</a></h3>
|
|
|
1454 <dl>
|
|
|
1455 <dt class="event-type-label">Type:</dt>
|
|
|
1456 <dd class="event-type">sortremove</dd>
|
|
|
1457 </dl>
|
|
|
1458 </div>
|
|
|
1459 <div class="event-description">
|
|
|
1460 <p>This event is triggered when a sortable item has been dragged out from the list and into another.</p>
|
|
|
1461 </div>
|
|
|
1462 <div class="event-examples">
|
|
|
1463 <h4>Code examples</h4>
|
|
|
1464 <dl class="event-examples-list">
|
|
|
1465
|
|
|
1466 <dt>
|
|
|
1467 Supply a callback function to handle the <code>remove</code> event as an init option.
|
|
|
1468 </dt>
|
|
|
1469 <dd>
|
|
|
1470 <pre><code>$( ".selector" ).sortable({
|
|
|
1471 remove: function(event, ui) { ... }
|
|
|
1472 });</code></pre>
|
|
|
1473 </dd>
|
|
|
1474
|
|
|
1475
|
|
|
1476 <dt>
|
|
|
1477 Bind to the <code>remove</code> event by type: <code>sortremove</code>.
|
|
|
1478 </dt>
|
|
|
1479 <dd>
|
|
|
1480 <pre><code>$( ".selector" ).bind( "sortremove", function(event, ui) {
|
|
|
1481 ...
|
|
|
1482 });</code></pre>
|
|
|
1483 </dd>
|
|
|
1484
|
|
|
1485 </dl>
|
|
|
1486 </div>
|
|
|
1487 </li>
|
|
|
1488
|
|
|
1489
|
|
|
1490 <li class="event" id="event-over">
|
|
|
1491 <div class="event-header">
|
|
|
1492 <h3 class="event-name"><a href="#event-over">over</a></h3>
|
|
|
1493 <dl>
|
|
|
1494 <dt class="event-type-label">Type:</dt>
|
|
|
1495 <dd class="event-type">sortover</dd>
|
|
|
1496 </dl>
|
|
|
1497 </div>
|
|
|
1498 <div class="event-description">
|
|
|
1499 <p>This event is triggered when a sortable item is moved into a connected list.</p>
|
|
|
1500 </div>
|
|
|
1501 <div class="event-examples">
|
|
|
1502 <h4>Code examples</h4>
|
|
|
1503 <dl class="event-examples-list">
|
|
|
1504
|
|
|
1505 <dt>
|
|
|
1506 Supply a callback function to handle the <code>over</code> event as an init option.
|
|
|
1507 </dt>
|
|
|
1508 <dd>
|
|
|
1509 <pre><code>$( ".selector" ).sortable({
|
|
|
1510 over: function(event, ui) { ... }
|
|
|
1511 });</code></pre>
|
|
|
1512 </dd>
|
|
|
1513
|
|
|
1514
|
|
|
1515 <dt>
|
|
|
1516 Bind to the <code>over</code> event by type: <code>sortover</code>.
|
|
|
1517 </dt>
|
|
|
1518 <dd>
|
|
|
1519 <pre><code>$( ".selector" ).bind( "sortover", function(event, ui) {
|
|
|
1520 ...
|
|
|
1521 });</code></pre>
|
|
|
1522 </dd>
|
|
|
1523
|
|
|
1524 </dl>
|
|
|
1525 </div>
|
|
|
1526 </li>
|
|
|
1527
|
|
|
1528
|
|
|
1529 <li class="event" id="event-out">
|
|
|
1530 <div class="event-header">
|
|
|
1531 <h3 class="event-name"><a href="#event-out">out</a></h3>
|
|
|
1532 <dl>
|
|
|
1533 <dt class="event-type-label">Type:</dt>
|
|
|
1534 <dd class="event-type">sortout</dd>
|
|
|
1535 </dl>
|
|
|
1536 </div>
|
|
|
1537 <div class="event-description">
|
|
|
1538 <p>This event is triggered when a sortable item is moved away from a connected list.</p>
|
|
|
1539 </div>
|
|
|
1540 <div class="event-examples">
|
|
|
1541 <h4>Code examples</h4>
|
|
|
1542 <dl class="event-examples-list">
|
|
|
1543
|
|
|
1544 <dt>
|
|
|
1545 Supply a callback function to handle the <code>out</code> event as an init option.
|
|
|
1546 </dt>
|
|
|
1547 <dd>
|
|
|
1548 <pre><code>$( ".selector" ).sortable({
|
|
|
1549 out: function(event, ui) { ... }
|
|
|
1550 });</code></pre>
|
|
|
1551 </dd>
|
|
|
1552
|
|
|
1553
|
|
|
1554 <dt>
|
|
|
1555 Bind to the <code>out</code> event by type: <code>sortout</code>.
|
|
|
1556 </dt>
|
|
|
1557 <dd>
|
|
|
1558 <pre><code>$( ".selector" ).bind( "sortout", function(event, ui) {
|
|
|
1559 ...
|
|
|
1560 });</code></pre>
|
|
|
1561 </dd>
|
|
|
1562
|
|
|
1563 </dl>
|
|
|
1564 </div>
|
|
|
1565 </li>
|
|
|
1566
|
|
|
1567
|
|
|
1568 <li class="event" id="event-activate">
|
|
|
1569 <div class="event-header">
|
|
|
1570 <h3 class="event-name"><a href="#event-activate">activate</a></h3>
|
|
|
1571 <dl>
|
|
|
1572 <dt class="event-type-label">Type:</dt>
|
|
|
1573 <dd class="event-type">sortactivate</dd>
|
|
|
1574 </dl>
|
|
|
1575 </div>
|
|
|
1576 <div class="event-description">
|
|
|
1577 <p>This event is triggered when using connected lists, every connected list on drag start receives it.</p>
|
|
|
1578 </div>
|
|
|
1579 <div class="event-examples">
|
|
|
1580 <h4>Code examples</h4>
|
|
|
1581 <dl class="event-examples-list">
|
|
|
1582
|
|
|
1583 <dt>
|
|
|
1584 Supply a callback function to handle the <code>activate</code> event as an init option.
|
|
|
1585 </dt>
|
|
|
1586 <dd>
|
|
|
1587 <pre><code>$( ".selector" ).sortable({
|
|
|
1588 activate: function(event, ui) { ... }
|
|
|
1589 });</code></pre>
|
|
|
1590 </dd>
|
|
|
1591
|
|
|
1592
|
|
|
1593 <dt>
|
|
|
1594 Bind to the <code>activate</code> event by type: <code>sortactivate</code>.
|
|
|
1595 </dt>
|
|
|
1596 <dd>
|
|
|
1597 <pre><code>$( ".selector" ).bind( "sortactivate", function(event, ui) {
|
|
|
1598 ...
|
|
|
1599 });</code></pre>
|
|
|
1600 </dd>
|
|
|
1601
|
|
|
1602 </dl>
|
|
|
1603 </div>
|
|
|
1604 </li>
|
|
|
1605
|
|
|
1606
|
|
|
1607 <li class="event" id="event-deactivate">
|
|
|
1608 <div class="event-header">
|
|
|
1609 <h3 class="event-name"><a href="#event-deactivate">deactivate</a></h3>
|
|
|
1610 <dl>
|
|
|
1611 <dt class="event-type-label">Type:</dt>
|
|
|
1612 <dd class="event-type">sortdeactivate</dd>
|
|
|
1613 </dl>
|
|
|
1614 </div>
|
|
|
1615 <div class="event-description">
|
|
|
1616 <p>This event is triggered when sorting was stopped, is propagated to all possible connected lists.</p>
|
|
|
1617 </div>
|
|
|
1618 <div class="event-examples">
|
|
|
1619 <h4>Code examples</h4>
|
|
|
1620 <dl class="event-examples-list">
|
|
|
1621
|
|
|
1622 <dt>
|
|
|
1623 Supply a callback function to handle the <code>deactivate</code> event as an init option.
|
|
|
1624 </dt>
|
|
|
1625 <dd>
|
|
|
1626 <pre><code>$( ".selector" ).sortable({
|
|
|
1627 deactivate: function(event, ui) { ... }
|
|
|
1628 });</code></pre>
|
|
|
1629 </dd>
|
|
|
1630
|
|
|
1631
|
|
|
1632 <dt>
|
|
|
1633 Bind to the <code>deactivate</code> event by type: <code>sortdeactivate</code>.
|
|
|
1634 </dt>
|
|
|
1635 <dd>
|
|
|
1636 <pre><code>$( ".selector" ).bind( "sortdeactivate", function(event, ui) {
|
|
|
1637 ...
|
|
|
1638 });</code></pre>
|
|
|
1639 </dd>
|
|
|
1640
|
|
|
1641 </dl>
|
|
|
1642 </div>
|
|
|
1643 </li>
|
|
|
1644
|
|
|
1645 </ul>
|
|
|
1646 </div>
|
|
|
1647 <div id="methods">
|
|
|
1648 <h2 class="top-header">Methods</h2>
|
|
|
1649 <ul class="methods-list">
|
|
|
1650
|
|
|
1651 <li class="method" id="method-destroy">
|
|
|
1652 <div class="method-header">
|
|
|
1653 <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
|
|
|
1654 <dl>
|
|
|
1655 <dt class="method-signature-label">Signature:</dt>
|
|
|
1656 <dd class="method-signature">.sortable( "destroy"
|
|
|
1657
|
|
|
1658
|
|
|
1659
|
|
|
1660
|
|
|
1661
|
|
|
1662
|
|
|
1663
|
|
|
1664 )</dd>
|
|
|
1665 </dl>
|
|
|
1666 </div>
|
|
|
1667 <div class="method-description">
|
|
|
1668 <p>Remove the sortable functionality completely. This will return the element back to its pre-init state.</p>
|
|
|
1669 </div>
|
|
|
1670 </li>
|
|
|
1671
|
|
|
1672
|
|
|
1673 <li class="method" id="method-disable">
|
|
|
1674 <div class="method-header">
|
|
|
1675 <h3 class="method-name"><a href="#method-disable">disable</a></h3>
|
|
|
1676 <dl>
|
|
|
1677 <dt class="method-signature-label">Signature:</dt>
|
|
|
1678 <dd class="method-signature">.sortable( "disable"
|
|
|
1679
|
|
|
1680
|
|
|
1681
|
|
|
1682
|
|
|
1683
|
|
|
1684
|
|
|
1685
|
|
|
1686 )</dd>
|
|
|
1687 </dl>
|
|
|
1688 </div>
|
|
|
1689 <div class="method-description">
|
|
|
1690 <p>Disable the sortable.</p>
|
|
|
1691 </div>
|
|
|
1692 </li>
|
|
|
1693
|
|
|
1694
|
|
|
1695 <li class="method" id="method-enable">
|
|
|
1696 <div class="method-header">
|
|
|
1697 <h3 class="method-name"><a href="#method-enable">enable</a></h3>
|
|
|
1698 <dl>
|
|
|
1699 <dt class="method-signature-label">Signature:</dt>
|
|
|
1700 <dd class="method-signature">.sortable( "enable"
|
|
|
1701
|
|
|
1702
|
|
|
1703
|
|
|
1704
|
|
|
1705
|
|
|
1706
|
|
|
1707
|
|
|
1708 )</dd>
|
|
|
1709 </dl>
|
|
|
1710 </div>
|
|
|
1711 <div class="method-description">
|
|
|
1712 <p>Enable the sortable.</p>
|
|
|
1713 </div>
|
|
|
1714 </li>
|
|
|
1715
|
|
|
1716
|
|
|
1717 <li class="method" id="method-option">
|
|
|
1718 <div class="method-header">
|
|
|
1719 <h3 class="method-name"><a href="#method-option">option</a></h3>
|
|
|
1720 <dl>
|
|
|
1721 <dt class="method-signature-label">Signature:</dt>
|
|
|
1722 <dd class="method-signature">.sortable( "option"
|
|
|
1723
|
|
|
1724 , optionName
|
|
|
1725
|
|
|
1726 , <span class="optional">[</span>value<span class="optional">] </span>
|
|
|
1727
|
|
|
1728
|
|
|
1729
|
|
|
1730 )</dd>
|
|
|
1731 </dl>
|
|
|
1732 </div>
|
|
|
1733 <div class="method-description">
|
|
|
1734 <p>Get or set any sortable option. If no value is specified, will act as a getter.</p>
|
|
|
1735 </div>
|
|
|
1736 </li>
|
|
|
1737
|
|
|
1738
|
|
|
1739 <li class="method" id="method-option">
|
|
|
1740 <div class="method-header">
|
|
|
1741 <h3 class="method-name"><a href="#method-option">option</a></h3>
|
|
|
1742 <dl>
|
|
|
1743 <dt class="method-signature-label">Signature:</dt>
|
|
|
1744 <dd class="method-signature">.sortable( "option"
|
|
|
1745
|
|
|
1746 , options
|
|
|
1747
|
|
|
1748
|
|
|
1749
|
|
|
1750
|
|
|
1751
|
|
|
1752 )</dd>
|
|
|
1753 </dl>
|
|
|
1754 </div>
|
|
|
1755 <div class="method-description">
|
|
|
1756 <p>Set multiple sortable options at once by providing an options object.</p>
|
|
|
1757 </div>
|
|
|
1758 </li>
|
|
|
1759
|
|
|
1760
|
|
|
1761 <li class="method" id="method-widget">
|
|
|
1762 <div class="method-header">
|
|
|
1763 <h3 class="method-name"><a href="#method-widget">widget</a></h3>
|
|
|
1764 <dl>
|
|
|
1765 <dt class="method-signature-label">Signature:</dt>
|
|
|
1766 <dd class="method-signature">.sortable( "widget"
|
|
|
1767
|
|
|
1768
|
|
|
1769
|
|
|
1770
|
|
|
1771
|
|
|
1772
|
|
|
1773
|
|
|
1774 )</dd>
|
|
|
1775 </dl>
|
|
|
1776 </div>
|
|
|
1777 <div class="method-description">
|
|
|
1778 <p>Returns the .ui-sortable element.</p>
|
|
|
1779 </div>
|
|
|
1780 </li>
|
|
|
1781
|
|
|
1782
|
|
|
1783 <li class="method" id="method-serialize">
|
|
|
1784 <div class="method-header">
|
|
|
1785 <h3 class="method-name"><a href="#method-serialize">serialize</a></h3>
|
|
|
1786 <dl>
|
|
|
1787 <dt class="method-signature-label">Signature:</dt>
|
|
|
1788 <dd class="method-signature">.sortable( "serialize"
|
|
|
1789
|
|
|
1790 , <span class="optional">[</span>options<span class="optional">] </span>
|
|
|
1791
|
|
|
1792
|
|
|
1793
|
|
|
1794
|
|
|
1795
|
|
|
1796 )</dd>
|
|
|
1797 </dl>
|
|
|
1798 </div>
|
|
|
1799 <div class="method-description">
|
|
|
1800 <p>Serializes the sortable's item id'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.
|
|
|
1801 </p><p>It works by default by looking at the id of each item in the format 'setname_number', and it spits out a hash like "setname[]=number&setname[]=number".
|
|
|
1802 </p><p>You can also give in a option hash as second argument to custom define how the function works. The possible options are: 'key' (replaces part1[] with whatever you want), 'attribute' (test another attribute than 'id') and 'expression' (use your own regexp).
|
|
|
1803 </p><p>If serialize returns an empty string, make sure the id attributes include an underscore. They must be in the form: "set_number" For example, a 3 element list with id attributes foo_1, foo_5, foo_2 will serialize to foo[]=1&foo[]=5&foo[]=2. You can use an underscore, equal sign or hyphen to separate the set and number. For example foo=1 or foo-1 or foo_1 all serialize to foo[]=1.</p>
|
|
|
1804 </div>
|
|
|
1805 </li>
|
|
|
1806
|
|
|
1807
|
|
|
1808 <li class="method" id="method-toArray">
|
|
|
1809 <div class="method-header">
|
|
|
1810 <h3 class="method-name"><a href="#method-toArray">toArray</a></h3>
|
|
|
1811 <dl>
|
|
|
1812 <dt class="method-signature-label">Signature:</dt>
|
|
|
1813 <dd class="method-signature">.sortable( "toArray"
|
|
|
1814
|
|
|
1815
|
|
|
1816
|
|
|
1817
|
|
|
1818
|
|
|
1819
|
|
|
1820
|
|
|
1821 )</dd>
|
|
|
1822 </dl>
|
|
|
1823 </div>
|
|
|
1824 <div class="method-description">
|
|
|
1825 <p>Serializes the sortable's item id's into an array of string. If you have
|
|
|
1826 </p>
|
|
|
1827 <pre>
|
|
|
1828 <ul id="a_sortable"><br>
|
|
|
1829 <li id="hello">Hello</li><br>
|
|
|
1830 <li id="goodbye">Good bye</li><br>
|
|
|
1831 </ul>
|
|
|
1832 </pre>
|
|
|
1833 <p>and do
|
|
|
1834 </p>
|
|
|
1835 <pre>var result = $('#a_sortable').sortable('toArray');</pre>
|
|
|
1836 <p>then
|
|
|
1837 </p>
|
|
|
1838 <pre>result[0] will contain "hello" and result[1] will contain "goodbye".</pre></p>
|
|
|
1839 </div>
|
|
|
1840 </li>
|
|
|
1841
|
|
|
1842 <p>
|
|
|
1843 <li class="method" id="method-refresh">
|
|
|
1844 <div class="method-header">
|
|
|
1845 <h3 class="method-name"><a href="#method-refresh">refresh</a></h3>
|
|
|
1846 <dl>
|
|
|
1847 <dt class="method-signature-label">Signature:</dt>
|
|
|
1848 <dd class="method-signature">.sortable( "refresh"
|
|
|
1849
|
|
|
1850
|
|
|
1851
|
|
|
1852
|
|
|
1853
|
|
|
1854
|
|
|
1855
|
|
|
1856 )</dd>
|
|
|
1857 </dl>
|
|
|
1858 </div>
|
|
|
1859 <div class="method-description">
|
|
|
1860 <p>Refresh the sortable items. Custom trigger the reloading of all sortable items, causing new items to be recognized.</p>
|
|
|
1861 </div>
|
|
|
1862 </li>
|
|
|
1863
|
|
|
1864
|
|
|
1865 <li class="method" id="method-refreshPositions">
|
|
|
1866 <div class="method-header">
|
|
|
1867 <h3 class="method-name"><a href="#method-refreshPositions">refreshPositions</a></h3>
|
|
|
1868 <dl>
|
|
|
1869 <dt class="method-signature-label">Signature:</dt>
|
|
|
1870 <dd class="method-signature">.sortable( "refreshPositions"
|
|
|
1871
|
|
|
1872
|
|
|
1873
|
|
|
1874
|
|
|
1875
|
|
|
1876
|
|
|
1877
|
|
|
1878 )</dd>
|
|
|
1879 </dl>
|
|
|
1880 </div>
|
|
|
1881 <div class="method-description">
|
|
|
1882 <p>Refresh the cached positions of the sortables' items. Calling this method refreshes the cached item positions of all sortables. This is usually done automatically by the script and slows down performance. Use wisely.</p>
|
|
|
1883 </div>
|
|
|
1884 </li>
|
|
|
1885
|
|
|
1886
|
|
|
1887 <li class="method" id="method-cancel">
|
|
|
1888 <div class="method-header">
|
|
|
1889 <h3 class="method-name"><a href="#method-cancel">cancel</a></h3>
|
|
|
1890 <dl>
|
|
|
1891 <dt class="method-signature-label">Signature:</dt>
|
|
|
1892 <dd class="method-signature">.sortable( "cancel"
|
|
|
1893
|
|
|
1894
|
|
|
1895
|
|
|
1896
|
|
|
1897
|
|
|
1898
|
|
|
1899
|
|
|
1900 )</dd>
|
|
|
1901 </dl>
|
|
|
1902 </div>
|
|
|
1903 <div class="method-description">
|
|
|
1904 <p>Cancels a change in the current sortable and reverts it back to how it was before the current sort started. Useful in the stop and receive callback functions.
|
|
|
1905 </p><p>If the sortable item is not being moved from one connected sortable to another:
|
|
|
1906 </p>
|
|
|
1907 <pre>$(this).sortable('cancel');</pre>
|
|
|
1908 <p>will cancel the change.
|
|
|
1909 </p><p>If the sortable item is being moved from one connected sortable to another:
|
|
|
1910 </p>
|
|
|
1911 <pre>$(ui.sender).sortable('cancel');</pre>
|
|
|
1912 <p>will cancel the change. Useful in the 'receive' callback.</p>
|
|
|
1913 </div>
|
|
|
1914 </li>
|
|
|
1915
|
|
|
1916 </ul>
|
|
|
1917 </div>
|
|
|
1918 <div id="theming">
|
|
|
1919 <h2 class="top-header">Theming</h2>
|
|
|
1920 <p>The jQuery UI Sortable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
|
|
|
1921 </p>
|
|
|
1922 <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.sortable.css stylesheet that can be modified. These classes are highlighed in bold below.
|
|
|
1923 </p>
|
|
|
1924
|
|
|
1925 <h3>Sample markup with jQuery UI CSS Framework classes</h3>
|
|
|
1926 <ul class="<strong>ui-sortable</strong>"><br />
|
|
|
1927    <li></li><br />
|
|
|
1928    <li class="<strong>ui-sortable-helper</strong>"></li><br />
|
|
|
1929    <li class="<strong>ui-sortable-placeholder</strong>"></li><br />
|
|
|
1930    <li></li><br />
|
|
|
1931 </ul>
|
|
|
1932 <p class="theme-note">
|
|
|
1933 <strong>
|
|
|
1934 Note: This is a sample of markup generated by the sortable plugin, not markup you should use to create a sortable. The only markup needed for that is <br /><ul><br />
|
|
|
1935    <li></li><br />
|
|
|
1936    <li></li><br />
|
|
|
1937    <li></li><br />
|
|
|
1938 </ul>.
|
|
|
1939 </strong>
|
|
|
1940 </p>
|
|
|
1941
|
|
|
1942 </div>
|
|
|
1943 </div>
|
|
|
1944
|
|
|
1945 </p><!--
|
|
|
1946 Pre-expand include size: 74974 bytes
|
|
|
1947 Post-expand include size: 128872 bytes
|
|
|
1948 Template argument size: 72454 bytes
|
|
|
1949 Maximum: 2097152 bytes
|
|
|
1950 -->
|
|
|
1951
|
|
|
1952 <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3772-1!1!0!!en!2 and timestamp 20110315194349 -->
|
