Mercurial > hg > MPIWGThesaurus

comparison jquery-ui/development-bundle/docs/sortable.html @ 0:b2e4605f20b2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
beta version
author dwinter
date Thu, 30 Jun 2011 09:07:49 +0200
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:b2e4605f20b2
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>$(&quot;#sortable&quot;).sortable();
41 </pre>
42 <p></div><div id="source" class="tabs-container">
43 </p>
44 <pre>&lt;!DOCTYPE html&gt;
45 &lt;html&gt;
46 &lt;head&gt;
47 &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
48 &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&quot;&gt;&lt;/script&gt;
49 &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
50
51 &lt;script&gt;
52 $(document).ready(function() {
53 $(&quot;#sortable&quot;).sortable();
54 });
55 &lt;/script&gt;
56 &lt;/head&gt;
57 &lt;body style="font-size:62.5%;"&gt;
58
59 &lt;ul id=&quot;sortable&quot;&gt;
60 &lt;li&gt;Item 1&lt;/li&gt;
61 &lt;li&gt;Item 2&lt;/li&gt;
62 &lt;li&gt;Item 3&lt;/li&gt;
63 &lt;li&gt;Item 4&lt;/li&gt;
64 &lt;li&gt;Item 5&lt;/li&gt;
65 &lt;/ul&gt;
66
67 &lt;/body&gt;
68 &lt;/html&gt;
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">'&gt; *'</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>$( &quot;.selector&quot; ).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>$( &quot;.selector&quot; ).bind( &quot;sortcreate&quot;, 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>$( &quot;.selector&quot; ).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>$( &quot;.selector&quot; ).bind( &quot;sortstart&quot;, 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>$( &quot;.selector&quot; ).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>$( &quot;.selector&quot; ).bind( &quot;sort&quot;, 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>$( &quot;.selector&quot; ).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>$( &quot;.selector&quot; ).bind( &quot;sortchange&quot;, 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>$( &quot;.selector&quot; ).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>$( &quot;.selector&quot; ).bind( &quot;sortbeforestop&quot;, 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>$( &quot;.selector&quot; ).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>$( &quot;.selector&quot; ).bind( &quot;sortstop&quot;, 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>$( &quot;.selector&quot; ).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>$( &quot;.selector&quot; ).bind( &quot;sortupdate&quot;, 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>$( &quot;.selector&quot; ).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>$( &quot;.selector&quot; ).bind( &quot;sortreceive&quot;, 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>$( &quot;.selector&quot; ).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>$( &quot;.selector&quot; ).bind( &quot;sortremove&quot;, 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>$( &quot;.selector&quot; ).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>$( &quot;.selector&quot; ).bind( &quot;sortover&quot;, 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>$( &quot;.selector&quot; ).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>$( &quot;.selector&quot; ).bind( &quot;sortout&quot;, 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>$( &quot;.selector&quot; ).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>$( &quot;.selector&quot; ).bind( &quot;sortactivate&quot;, 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>$( &quot;.selector&quot; ).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>$( &quot;.selector&quot; ).bind( &quot;sortdeactivate&quot;, 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&amp;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&amp;foo[]=5&amp;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 &lt;ul id=&quot;a_sortable&quot;&gt;&lt;br&gt;
1829 &lt;li id=&quot;hello&quot;&gt;Hello&lt;/li&gt;&lt;br&gt;
1830 &lt;li id=&quot;goodbye&quot;&gt;Good bye&lt;/li&gt;&lt;br&gt;
1831 &lt;/ul&gt;
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 &quot;hello&quot; and result[1] will contain &quot;goodbye&quot;.</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 &lt;ul class=&quot;<strong>ui-sortable</strong>&quot;&gt;<br />
1927 &#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
1928 &#160;&#160;&#160;&lt;li class=&quot;<strong>ui-sortable-helper</strong>&quot;&gt;&lt;/li&gt;<br />
1929 &#160;&#160;&#160;&lt;li class=&quot;<strong>ui-sortable-placeholder</strong>&quot;&gt;&lt;/li&gt;<br />
1930 &#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
1931 &lt;/ul&gt;
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 />&lt;ul&gt;<br />
1935 &#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
1936 &#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
1937 &#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
1938 &lt;/ul&gt;.
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 -->