Mercurial > hg > STI-GWT

comparison war/scripts/jQuery/docs/sortable.html @ 3:cf06b77a8bbd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Committed branch of the e4D repos sti-gwt branch 16384. git-svn-id: http://dev.dariah.eu/svn/repos/eu.dariah.de/ap1/sti-gwt-dariah-geobrowser@36 f2b5be40-def6-11e0-8a09-b3c1cc336c6b
author StefanFunk <StefanFunk@f2b5be40-def6-11e0-8a09-b3c1cc336c6b>
date Tue, 17 Jul 2012 13:34:40 +0000
parents
children
comparison
equal deleted inserted replaced
2:2897af43ccc6 3:cf06b77a8bbd
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.5/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.
302 </p><p>Note: the element specified for containment must have a calculated width and height (though it need not be explicit), so for example, if you have float:left sortable children and specify containment:'parent' be sure to have float:left on the sortable/parent container as well or it will have height: 0, causing undefined behavior.</p>
303 </div>
304 <div class="option-examples">
305 <h4>Code examples</h4>
306 <dl class="option-examples-list">
307
308 <dt>
309 Initialize a sortable with the <code>containment</code> option specified.
310 </dt>
311 <dd>
312 <pre><code>$( ".selector" ).sortable({ containment: 'parent' });</code></pre>
313 </dd>
314
315
316 <dt>
317 Get or set the <code>containment</code> option, after init.
318 </dt>
319 <dd>
320 <pre><code>//getter
321 var containment = $( ".selector" ).sortable( "option", "containment" );
322 //setter
323 $( ".selector" ).sortable( "option", "containment", 'parent' );</code></pre>
324 </dd>
325
326 </dl>
327 </div>
328 </li>
329
330
331 <li class="option" id="option-cursor">
332 <div class="option-header">
333 <h3 class="option-name"><a href="#option-cursor">cursor</a></h3>
334 <dl>
335 <dt class="option-type-label">Type:</dt>
336 <dd class="option-type">String</dd>
337
338 <dt class="option-default-label">Default:</dt>
339 <dd class="option-default">'auto'</dd>
340
341 </dl>
342 </div>
343 <div class="option-description">
344 <p>Defines the cursor that is being shown while sorting.</p>
345 </div>
346 <div class="option-examples">
347 <h4>Code examples</h4>
348 <dl class="option-examples-list">
349
350 <dt>
351 Initialize a sortable with the <code>cursor</code> option specified.
352 </dt>
353 <dd>
354 <pre><code>$( ".selector" ).sortable({ cursor: 'crosshair' });</code></pre>
355 </dd>
356
357
358 <dt>
359 Get or set the <code>cursor</code> option, after init.
360 </dt>
361 <dd>
362 <pre><code>//getter
363 var cursor = $( ".selector" ).sortable( "option", "cursor" );
364 //setter
365 $( ".selector" ).sortable( "option", "cursor", 'crosshair' );</code></pre>
366 </dd>
367
368 </dl>
369 </div>
370 </li>
371
372
373 <li class="option" id="option-cursorAt">
374 <div class="option-header">
375 <h3 class="option-name"><a href="#option-cursorAt">cursorAt</a></h3>
376 <dl>
377 <dt class="option-type-label">Type:</dt>
378 <dd class="option-type">Object</dd>
379
380 <dt class="option-default-label">Default:</dt>
381 <dd class="option-default">false</dd>
382
383 </dl>
384 </div>
385 <div class="option-description">
386 <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>
387 </div>
388 <div class="option-examples">
389 <h4>Code examples</h4>
390 <dl class="option-examples-list">
391
392 <dt>
393 Initialize a sortable with the <code>cursorAt</code> option specified.
394 </dt>
395 <dd>
396 <pre><code>$( ".selector" ).sortable({ cursorAt: 'top' });</code></pre>
397 </dd>
398
399
400 <dt>
401 Get or set the <code>cursorAt</code> option, after init.
402 </dt>
403 <dd>
404 <pre><code>//getter
405 var cursorAt = $( ".selector" ).sortable( "option", "cursorAt" );
406 //setter
407 $( ".selector" ).sortable( "option", "cursorAt", 'top' );</code></pre>
408 </dd>
409
410 </dl>
411 </div>
412 </li>
413
414
415 <li class="option" id="option-delay">
416 <div class="option-header">
417 <h3 class="option-name"><a href="#option-delay">delay</a></h3>
418 <dl>
419 <dt class="option-type-label">Type:</dt>
420 <dd class="option-type">Integer</dd>
421
422 <dt class="option-default-label">Default:</dt>
423 <dd class="option-default">0</dd>
424
425 </dl>
426 </div>
427 <div class="option-description">
428 <p>Time in milliseconds to define when the sorting should start. It helps preventing unwanted drags when clicking on an element.</p>
429 </div>
430 <div class="option-examples">
431 <h4>Code examples</h4>
432 <dl class="option-examples-list">
433
434 <dt>
435 Initialize a sortable with the <code>delay</code> option specified.
436 </dt>
437 <dd>
438 <pre><code>$( ".selector" ).sortable({ delay: 500 });</code></pre>
439 </dd>
440
441
442 <dt>
443 Get or set the <code>delay</code> option, after init.
444 </dt>
445 <dd>
446 <pre><code>//getter
447 var delay = $( ".selector" ).sortable( "option", "delay" );
448 //setter
449 $( ".selector" ).sortable( "option", "delay", 500 );</code></pre>
450 </dd>
451
452 </dl>
453 </div>
454 </li>
455
456
457 <li class="option" id="option-distance">
458 <div class="option-header">
459 <h3 class="option-name"><a href="#option-distance">distance</a></h3>
460 <dl>
461 <dt class="option-type-label">Type:</dt>
462 <dd class="option-type">Integer</dd>
463
464 <dt class="option-default-label">Default:</dt>
465 <dd class="option-default">1</dd>
466
467 </dl>
468 </div>
469 <div class="option-description">
470 <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>
471 </div>
472 <div class="option-examples">
473 <h4>Code examples</h4>
474 <dl class="option-examples-list">
475
476 <dt>
477 Initialize a sortable with the <code>distance</code> option specified.
478 </dt>
479 <dd>
480 <pre><code>$( ".selector" ).sortable({ distance: 30 });</code></pre>
481 </dd>
482
483
484 <dt>
485 Get or set the <code>distance</code> option, after init.
486 </dt>
487 <dd>
488 <pre><code>//getter
489 var distance = $( ".selector" ).sortable( "option", "distance" );
490 //setter
491 $( ".selector" ).sortable( "option", "distance", 30 );</code></pre>
492 </dd>
493
494 </dl>
495 </div>
496 </li>
497
498
499 <li class="option" id="option-dropOnEmpty">
500 <div class="option-header">
501 <h3 class="option-name"><a href="#option-dropOnEmpty">dropOnEmpty</a></h3>
502 <dl>
503 <dt class="option-type-label">Type:</dt>
504 <dd class="option-type">Boolean</dd>
505
506 <dt class="option-default-label">Default:</dt>
507 <dd class="option-default">true</dd>
508
509 </dl>
510 </div>
511 <div class="option-description">
512 <p>If false items from this sortable can't be dropped to an empty linked sortable.</p>
513 </div>
514 <div class="option-examples">
515 <h4>Code examples</h4>
516 <dl class="option-examples-list">
517
518 <dt>
519 Initialize a sortable with the <code>dropOnEmpty</code> option specified.
520 </dt>
521 <dd>
522 <pre><code>$( ".selector" ).sortable({ dropOnEmpty: false });</code></pre>
523 </dd>
524
525
526 <dt>
527 Get or set the <code>dropOnEmpty</code> option, after init.
528 </dt>
529 <dd>
530 <pre><code>//getter
531 var dropOnEmpty = $( ".selector" ).sortable( "option", "dropOnEmpty" );
532 //setter
533 $( ".selector" ).sortable( "option", "dropOnEmpty", false );</code></pre>
534 </dd>
535
536 </dl>
537 </div>
538 </li>
539
540
541 <li class="option" id="option-forceHelperSize">
542 <div class="option-header">
543 <h3 class="option-name"><a href="#option-forceHelperSize">forceHelperSize</a></h3>
544 <dl>
545 <dt class="option-type-label">Type:</dt>
546 <dd class="option-type">Boolean</dd>
547
548 <dt class="option-default-label">Default:</dt>
549 <dd class="option-default">false</dd>
550
551 </dl>
552 </div>
553 <div class="option-description">
554 <p>If true, forces the helper to have a size.</p>
555 </div>
556 <div class="option-examples">
557 <h4>Code examples</h4>
558 <dl class="option-examples-list">
559
560 <dt>
561 Initialize a sortable with the <code>forceHelperSize</code> option specified.
562 </dt>
563 <dd>
564 <pre><code>$( ".selector" ).sortable({ forceHelperSize: true });</code></pre>
565 </dd>
566
567
568 <dt>
569 Get or set the <code>forceHelperSize</code> option, after init.
570 </dt>
571 <dd>
572 <pre><code>//getter
573 var forceHelperSize = $( ".selector" ).sortable( "option", "forceHelperSize" );
574 //setter
575 $( ".selector" ).sortable( "option", "forceHelperSize", true );</code></pre>
576 </dd>
577
578 </dl>
579 </div>
580 </li>
581
582
583 <li class="option" id="option-forcePlaceholderSize">
584 <div class="option-header">
585 <h3 class="option-name"><a href="#option-forcePlaceholderSize">forcePlaceholderSize</a></h3>
586 <dl>
587 <dt class="option-type-label">Type:</dt>
588 <dd class="option-type">Boolean</dd>
589
590 <dt class="option-default-label">Default:</dt>
591 <dd class="option-default">false</dd>
592
593 </dl>
594 </div>
595 <div class="option-description">
596 <p>If true, forces the placeholder to have a size.</p>
597 </div>
598 <div class="option-examples">
599 <h4>Code examples</h4>
600 <dl class="option-examples-list">
601
602 <dt>
603 Initialize a sortable with the <code>forcePlaceholderSize</code> option specified.
604 </dt>
605 <dd>
606 <pre><code>$( ".selector" ).sortable({ forcePlaceholderSize: true });</code></pre>
607 </dd>
608
609
610 <dt>
611 Get or set the <code>forcePlaceholderSize</code> option, after init.
612 </dt>
613 <dd>
614 <pre><code>//getter
615 var forcePlaceholderSize = $( ".selector" ).sortable( "option", "forcePlaceholderSize" );
616 //setter
617 $( ".selector" ).sortable( "option", "forcePlaceholderSize", true );</code></pre>
618 </dd>
619
620 </dl>
621 </div>
622 </li>
623
624
625 <li class="option" id="option-grid">
626 <div class="option-header">
627 <h3 class="option-name"><a href="#option-grid">grid</a></h3>
628 <dl>
629 <dt class="option-type-label">Type:</dt>
630 <dd class="option-type">Array</dd>
631
632 <dt class="option-default-label">Default:</dt>
633 <dd class="option-default">false</dd>
634
635 </dl>
636 </div>
637 <div class="option-description">
638 <p>Snaps the sorting element or helper to a grid, every x and y pixels. Array values: [x, y]</p>
639 </div>
640 <div class="option-examples">
641 <h4>Code examples</h4>
642 <dl class="option-examples-list">
643
644 <dt>
645 Initialize a sortable with the <code>grid</code> option specified.
646 </dt>
647 <dd>
648 <pre><code>$( ".selector" ).sortable({ grid: [50, 20] });</code></pre>
649 </dd>
650
651
652 <dt>
653 Get or set the <code>grid</code> option, after init.
654 </dt>
655 <dd>
656 <pre><code>//getter
657 var grid = $( ".selector" ).sortable( "option", "grid" );
658 //setter
659 $( ".selector" ).sortable( "option", "grid", [50, 20] );</code></pre>
660 </dd>
661
662 </dl>
663 </div>
664 </li>
665
666
667 <li class="option" id="option-handle">
668 <div class="option-header">
669 <h3 class="option-name"><a href="#option-handle">handle</a></h3>
670 <dl>
671 <dt class="option-type-label">Type:</dt>
672 <dd class="option-type">Selector, Element</dd>
673
674 <dt class="option-default-label">Default:</dt>
675 <dd class="option-default">false</dd>
676
677 </dl>
678 </div>
679 <div class="option-description">
680 <p>Restricts sort start click to the specified element.</p>
681 </div>
682 <div class="option-examples">
683 <h4>Code examples</h4>
684 <dl class="option-examples-list">
685
686 <dt>
687 Initialize a sortable with the <code>handle</code> option specified.
688 </dt>
689 <dd>
690 <pre><code>$( ".selector" ).sortable({ handle: 'h2' });</code></pre>
691 </dd>
692
693
694 <dt>
695 Get or set the <code>handle</code> option, after init.
696 </dt>
697 <dd>
698 <pre><code>//getter
699 var handle = $( ".selector" ).sortable( "option", "handle" );
700 //setter
701 $( ".selector" ).sortable( "option", "handle", 'h2' );</code></pre>
702 </dd>
703
704 </dl>
705 </div>
706 </li>
707
708
709 <li class="option" id="option-helper">
710 <div class="option-header">
711 <h3 class="option-name"><a href="#option-helper">helper</a></h3>
712 <dl>
713 <dt class="option-type-label">Type:</dt>
714 <dd class="option-type">String, Function</dd>
715
716 <dt class="option-default-label">Default:</dt>
717 <dd class="option-default">'original'</dd>
718
719 </dl>
720 </div>
721 <div class="option-description">
722 <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>
723 </div>
724 <div class="option-examples">
725 <h4>Code examples</h4>
726 <dl class="option-examples-list">
727
728 <dt>
729 Initialize a sortable with the <code>helper</code> option specified.
730 </dt>
731 <dd>
732 <pre><code>$( ".selector" ).sortable({ helper: 'clone' });</code></pre>
733 </dd>
734
735
736 <dt>
737 Get or set the <code>helper</code> option, after init.
738 </dt>
739 <dd>
740 <pre><code>//getter
741 var helper = $( ".selector" ).sortable( "option", "helper" );
742 //setter
743 $( ".selector" ).sortable( "option", "helper", 'clone' );</code></pre>
744 </dd>
745
746 </dl>
747 </div>
748 </li>
749
750
751 <li class="option" id="option-items">
752 <div class="option-header">
753 <h3 class="option-name"><a href="#option-items">items</a></h3>
754 <dl>
755 <dt class="option-type-label">Type:</dt>
756 <dd class="option-type">Selector</dd>
757
758 <dt class="option-default-label">Default:</dt>
759 <dd class="option-default">'&gt; *'</dd>
760
761 </dl>
762 </div>
763 <div class="option-description">
764 <p>Specifies which items inside the element should be sortable.</p>
765 </div>
766 <div class="option-examples">
767 <h4>Code examples</h4>
768 <dl class="option-examples-list">
769
770 <dt>
771 Initialize a sortable with the <code>items</code> option specified.
772 </dt>
773 <dd>
774 <pre><code>$( ".selector" ).sortable({ items: 'li' });</code></pre>
775 </dd>
776
777
778 <dt>
779 Get or set the <code>items</code> option, after init.
780 </dt>
781 <dd>
782 <pre><code>//getter
783 var items = $( ".selector" ).sortable( "option", "items" );
784 //setter
785 $( ".selector" ).sortable( "option", "items", 'li' );</code></pre>
786 </dd>
787
788 </dl>
789 </div>
790 </li>
791
792
793 <li class="option" id="option-opacity">
794 <div class="option-header">
795 <h3 class="option-name"><a href="#option-opacity">opacity</a></h3>
796 <dl>
797 <dt class="option-type-label">Type:</dt>
798 <dd class="option-type">Float</dd>
799
800 <dt class="option-default-label">Default:</dt>
801 <dd class="option-default">false</dd>
802
803 </dl>
804 </div>
805 <div class="option-description">
806 <p>Defines the opacity of the helper while sorting. From 0.01 to 1</p>
807 </div>
808 <div class="option-examples">
809 <h4>Code examples</h4>
810 <dl class="option-examples-list">
811
812 <dt>
813 Initialize a sortable with the <code>opacity</code> option specified.
814 </dt>
815 <dd>
816 <pre><code>$( ".selector" ).sortable({ opacity: 0.6 });</code></pre>
817 </dd>
818
819
820 <dt>
821 Get or set the <code>opacity</code> option, after init.
822 </dt>
823 <dd>
824 <pre><code>//getter
825 var opacity = $( ".selector" ).sortable( "option", "opacity" );
826 //setter
827 $( ".selector" ).sortable( "option", "opacity", 0.6 );</code></pre>
828 </dd>
829
830 </dl>
831 </div>
832 </li>
833
834
835 <li class="option" id="option-placeholder">
836 <div class="option-header">
837 <h3 class="option-name"><a href="#option-placeholder">placeholder</a></h3>
838 <dl>
839 <dt class="option-type-label">Type:</dt>
840 <dd class="option-type">String</dd>
841
842 <dt class="option-default-label">Default:</dt>
843 <dd class="option-default">false</dd>
844
845 </dl>
846 </div>
847 <div class="option-description">
848 <p>Class that gets applied to the otherwise white space.</p>
849 </div>
850 <div class="option-examples">
851 <h4>Code examples</h4>
852 <dl class="option-examples-list">
853
854 <dt>
855 Initialize a sortable with the <code>placeholder</code> option specified.
856 </dt>
857 <dd>
858 <pre><code>$( ".selector" ).sortable({ placeholder: 'ui-state-highlight' });</code></pre>
859 </dd>
860
861
862 <dt>
863 Get or set the <code>placeholder</code> option, after init.
864 </dt>
865 <dd>
866 <pre><code>//getter
867 var placeholder = $( ".selector" ).sortable( "option", "placeholder" );
868 //setter
869 $( ".selector" ).sortable( "option", "placeholder", 'ui-state-highlight' );</code></pre>
870 </dd>
871
872 </dl>
873 </div>
874 </li>
875
876
877 <li class="option" id="option-revert">
878 <div class="option-header">
879 <h3 class="option-name"><a href="#option-revert">revert</a></h3>
880 <dl>
881 <dt class="option-type-label">Type:</dt>
882 <dd class="option-type">Boolean/Integer</dd>
883
884 <dt class="option-default-label">Default:</dt>
885 <dd class="option-default">false</dd>
886
887 </dl>
888 </div>
889 <div class="option-description">
890 <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>
891 </div>
892 <div class="option-examples">
893 <h4>Code examples</h4>
894 <dl class="option-examples-list">
895
896 <dt>
897 Initialize a sortable with the <code>revert</code> option specified.
898 </dt>
899 <dd>
900 <pre><code>$( ".selector" ).sortable({ revert: true });</code></pre>
901 </dd>
902
903
904 <dt>
905 Get or set the <code>revert</code> option, after init.
906 </dt>
907 <dd>
908 <pre><code>//getter
909 var revert = $( ".selector" ).sortable( "option", "revert" );
910 //setter
911 $( ".selector" ).sortable( "option", "revert", true );</code></pre>
912 </dd>
913
914 </dl>
915 </div>
916 </li>
917
918
919 <li class="option" id="option-scroll">
920 <div class="option-header">
921 <h3 class="option-name"><a href="#option-scroll">scroll</a></h3>
922 <dl>
923 <dt class="option-type-label">Type:</dt>
924 <dd class="option-type">Boolean</dd>
925
926 <dt class="option-default-label">Default:</dt>
927 <dd class="option-default">true</dd>
928
929 </dl>
930 </div>
931 <div class="option-description">
932 <p>If set to true, the page scrolls when coming to an edge.</p>
933 </div>
934 <div class="option-examples">
935 <h4>Code examples</h4>
936 <dl class="option-examples-list">
937
938 <dt>
939 Initialize a sortable with the <code>scroll</code> option specified.
940 </dt>
941 <dd>
942 <pre><code>$( ".selector" ).sortable({ scroll: false });</code></pre>
943 </dd>
944
945
946 <dt>
947 Get or set the <code>scroll</code> option, after init.
948 </dt>
949 <dd>
950 <pre><code>//getter
951 var scroll = $( ".selector" ).sortable( "option", "scroll" );
952 //setter
953 $( ".selector" ).sortable( "option", "scroll", false );</code></pre>
954 </dd>
955
956 </dl>
957 </div>
958 </li>
959
960
961 <li class="option" id="option-scrollSensitivity">
962 <div class="option-header">
963 <h3 class="option-name"><a href="#option-scrollSensitivity">scrollSensitivity</a></h3>
964 <dl>
965 <dt class="option-type-label">Type:</dt>
966 <dd class="option-type">Integer</dd>
967
968 <dt class="option-default-label">Default:</dt>
969 <dd class="option-default">20</dd>
970
971 </dl>
972 </div>
973 <div class="option-description">
974 <p>Defines how near the mouse must be to an edge to start scrolling.</p>
975 </div>
976 <div class="option-examples">
977 <h4>Code examples</h4>
978 <dl class="option-examples-list">
979
980 <dt>
981 Initialize a sortable with the <code>scrollSensitivity</code> option specified.
982 </dt>
983 <dd>
984 <pre><code>$( ".selector" ).sortable({ scrollSensitivity: 40 });</code></pre>
985 </dd>
986
987
988 <dt>
989 Get or set the <code>scrollSensitivity</code> option, after init.
990 </dt>
991 <dd>
992 <pre><code>//getter
993 var scrollSensitivity = $( ".selector" ).sortable( "option", "scrollSensitivity" );
994 //setter
995 $( ".selector" ).sortable( "option", "scrollSensitivity", 40 );</code></pre>
996 </dd>
997
998 </dl>
999 </div>
1000 </li>
1001
1002
1003 <li class="option" id="option-scrollSpeed">
1004 <div class="option-header">
1005 <h3 class="option-name"><a href="#option-scrollSpeed">scrollSpeed</a></h3>
1006 <dl>
1007 <dt class="option-type-label">Type:</dt>
1008 <dd class="option-type">Integer</dd>
1009
1010 <dt class="option-default-label">Default:</dt>
1011 <dd class="option-default">20</dd>
1012
1013 </dl>
1014 </div>
1015 <div class="option-description">
1016 <p>The speed at which the window should scroll once the mouse pointer gets within the scrollSensitivity distance.</p>
1017 </div>
1018 <div class="option-examples">
1019 <h4>Code examples</h4>
1020 <dl class="option-examples-list">
1021
1022 <dt>
1023 Initialize a sortable with the <code>scrollSpeed</code> option specified.
1024 </dt>
1025 <dd>
1026 <pre><code>$( ".selector" ).sortable({ scrollSpeed: 40 });</code></pre>
1027 </dd>
1028
1029
1030 <dt>
1031 Get or set the <code>scrollSpeed</code> option, after init.
1032 </dt>
1033 <dd>
1034 <pre><code>//getter
1035 var scrollSpeed = $( ".selector" ).sortable( "option", "scrollSpeed" );
1036 //setter
1037 $( ".selector" ).sortable( "option", "scrollSpeed", 40 );</code></pre>
1038 </dd>
1039
1040 </dl>
1041 </div>
1042 </li>
1043
1044
1045 <li class="option" id="option-tolerance">
1046 <div class="option-header">
1047 <h3 class="option-name"><a href="#option-tolerance">tolerance</a></h3>
1048 <dl>
1049 <dt class="option-type-label">Type:</dt>
1050 <dd class="option-type">String</dd>
1051
1052 <dt class="option-default-label">Default:</dt>
1053 <dd class="option-default">'intersect'</dd>
1054
1055 </dl>
1056 </div>
1057 <div class="option-description">
1058 <p>This is the way the reordering behaves during drag. Possible values: 'intersect', 'pointer'. In some setups, 'pointer' is more natural.
1059 </p>
1060 <ul>
1061 <li><b>intersect</b>: draggable overlaps the droppable at least 50%</li>
1062 <li><b>pointer</b>: mouse pointer overlaps the droppable</li>
1063 </ul>
1064 <p></p>
1065 </div>
1066 <div class="option-examples">
1067 <h4>Code examples</h4>
1068 <dl class="option-examples-list">
1069
1070 <dt>
1071 Initialize a sortable with the <code>tolerance</code> option specified.
1072 </dt>
1073 <dd>
1074 <pre><code>$( ".selector" ).sortable({ tolerance: 'pointer' });</code></pre>
1075 </dd>
1076
1077
1078 <dt>
1079 Get or set the <code>tolerance</code> option, after init.
1080 </dt>
1081 <dd>
1082 <pre><code>//getter
1083 var tolerance = $( ".selector" ).sortable( "option", "tolerance" );
1084 //setter
1085 $( ".selector" ).sortable( "option", "tolerance", 'pointer' );</code></pre>
1086 </dd>
1087
1088 </dl>
1089 </div>
1090 </li>
1091
1092
1093 <li class="option" id="option-zIndex">
1094 <div class="option-header">
1095 <h3 class="option-name"><a href="#option-zIndex">zIndex</a></h3>
1096 <dl>
1097 <dt class="option-type-label">Type:</dt>
1098 <dd class="option-type">Integer</dd>
1099
1100 <dt class="option-default-label">Default:</dt>
1101 <dd class="option-default">1000</dd>
1102
1103 </dl>
1104 </div>
1105 <div class="option-description">
1106 <p>Z-index for element/helper while being sorted.</p>
1107 </div>
1108 <div class="option-examples">
1109 <h4>Code examples</h4>
1110 <dl class="option-examples-list">
1111
1112 <dt>
1113 Initialize a sortable with the <code>zIndex</code> option specified.
1114 </dt>
1115 <dd>
1116 <pre><code>$( ".selector" ).sortable({ zIndex: 5 });</code></pre>
1117 </dd>
1118
1119
1120 <dt>
1121 Get or set the <code>zIndex</code> option, after init.
1122 </dt>
1123 <dd>
1124 <pre><code>//getter
1125 var zIndex = $( ".selector" ).sortable( "option", "zIndex" );
1126 //setter
1127 $( ".selector" ).sortable( "option", "zIndex", 5 );</code></pre>
1128 </dd>
1129
1130 </dl>
1131 </div>
1132 </li>
1133
1134 </ul>
1135 </div>
1136 <div id="events">
1137 <h2 class="top-header">Events</h2>
1138 <ul class="events-list">
1139
1140 <li class="event" id="event-create">
1141 <div class="event-header">
1142 <h3 class="event-name"><a href="#event-create">create</a></h3>
1143 <dl>
1144 <dt class="event-type-label">Type:</dt>
1145 <dd class="event-type">sortcreate</dd>
1146 </dl>
1147 </div>
1148 <div class="event-description">
1149 <p>This event is triggered when sortable is created.</p>
1150 </div>
1151 <div class="event-examples">
1152 <h4>Code examples</h4>
1153 <dl class="event-examples-list">
1154
1155 <dt>
1156 Supply a callback function to handle the <code>create</code> event as an init option.
1157 </dt>
1158 <dd>
1159 <pre><code>$( &quot;.selector&quot; ).sortable({
1160 create: function(event, ui) { ... }
1161 });</code></pre>
1162 </dd>
1163
1164
1165 <dt>
1166 Bind to the <code>create</code> event by type: <code>sortcreate</code>.
1167 </dt>
1168 <dd>
1169 <pre><code>$( &quot;.selector&quot; ).bind( &quot;sortcreate&quot;, function(event, ui) {
1170 ...
1171 });</code></pre>
1172 </dd>
1173
1174 </dl>
1175 </div>
1176 </li>
1177
1178
1179 <li class="event" id="event-start">
1180 <div class="event-header">
1181 <h3 class="event-name"><a href="#event-start">start</a></h3>
1182 <dl>
1183 <dt class="event-type-label">Type:</dt>
1184 <dd class="event-type">sortstart</dd>
1185 </dl>
1186 </div>
1187 <div class="event-description">
1188 <p>This event is triggered when sorting starts.</p>
1189 </div>
1190 <div class="event-examples">
1191 <h4>Code examples</h4>
1192 <dl class="event-examples-list">
1193
1194 <dt>
1195 Supply a callback function to handle the <code>start</code> event as an init option.
1196 </dt>
1197 <dd>
1198 <pre><code>$( &quot;.selector&quot; ).sortable({
1199 start: function(event, ui) { ... }
1200 });</code></pre>
1201 </dd>
1202
1203
1204 <dt>
1205 Bind to the <code>start</code> event by type: <code>sortstart</code>.
1206 </dt>
1207 <dd>
1208 <pre><code>$( &quot;.selector&quot; ).bind( &quot;sortstart&quot;, function(event, ui) {
1209 ...
1210 });</code></pre>
1211 </dd>
1212
1213 </dl>
1214 </div>
1215 </li>
1216
1217
1218 <li class="event" id="event-sort">
1219 <div class="event-header">
1220 <h3 class="event-name"><a href="#event-sort">sort</a></h3>
1221 <dl>
1222 <dt class="event-type-label">Type:</dt>
1223 <dd class="event-type">sort</dd>
1224 </dl>
1225 </div>
1226 <div class="event-description">
1227 <p>This event is triggered during sorting.</p>
1228 </div>
1229 <div class="event-examples">
1230 <h4>Code examples</h4>
1231 <dl class="event-examples-list">
1232
1233 <dt>
1234 Supply a callback function to handle the <code>sort</code> event as an init option.
1235 </dt>
1236 <dd>
1237 <pre><code>$( &quot;.selector&quot; ).sortable({
1238 sort: function(event, ui) { ... }
1239 });</code></pre>
1240 </dd>
1241
1242
1243 <dt>
1244 Bind to the <code>sort</code> event by type: <code>sort</code>.
1245 </dt>
1246 <dd>
1247 <pre><code>$( &quot;.selector&quot; ).bind( &quot;sort&quot;, function(event, ui) {
1248 ...
1249 });</code></pre>
1250 </dd>
1251
1252 </dl>
1253 </div>
1254 </li>
1255
1256
1257 <li class="event" id="event-change">
1258 <div class="event-header">
1259 <h3 class="event-name"><a href="#event-change">change</a></h3>
1260 <dl>
1261 <dt class="event-type-label">Type:</dt>
1262 <dd class="event-type">sortchange</dd>
1263 </dl>
1264 </div>
1265 <div class="event-description">
1266 <p>This event is triggered during sorting, but only when the DOM position has changed.</p>
1267 </div>
1268 <div class="event-examples">
1269 <h4>Code examples</h4>
1270 <dl class="event-examples-list">
1271
1272 <dt>
1273 Supply a callback function to handle the <code>change</code> event as an init option.
1274 </dt>
1275 <dd>
1276 <pre><code>$( &quot;.selector&quot; ).sortable({
1277 change: function(event, ui) { ... }
1278 });</code></pre>
1279 </dd>
1280
1281
1282 <dt>
1283 Bind to the <code>change</code> event by type: <code>sortchange</code>.
1284 </dt>
1285 <dd>
1286 <pre><code>$( &quot;.selector&quot; ).bind( &quot;sortchange&quot;, function(event, ui) {
1287 ...
1288 });</code></pre>
1289 </dd>
1290
1291 </dl>
1292 </div>
1293 </li>
1294
1295
1296 <li class="event" id="event-beforeStop">
1297 <div class="event-header">
1298 <h3 class="event-name"><a href="#event-beforeStop">beforeStop</a></h3>
1299 <dl>
1300 <dt class="event-type-label">Type:</dt>
1301 <dd class="event-type">sortbeforestop</dd>
1302 </dl>
1303 </div>
1304 <div class="event-description">
1305 <p>This event is triggered when sorting stops, but when the placeholder/helper is still available.</p>
1306 </div>
1307 <div class="event-examples">
1308 <h4>Code examples</h4>
1309 <dl class="event-examples-list">
1310
1311 <dt>
1312 Supply a callback function to handle the <code>beforeStop</code> event as an init option.
1313 </dt>
1314 <dd>
1315 <pre><code>$( &quot;.selector&quot; ).sortable({
1316 beforeStop: function(event, ui) { ... }
1317 });</code></pre>
1318 </dd>
1319
1320
1321 <dt>
1322 Bind to the <code>beforeStop</code> event by type: <code>sortbeforestop</code>.
1323 </dt>
1324 <dd>
1325 <pre><code>$( &quot;.selector&quot; ).bind( &quot;sortbeforestop&quot;, function(event, ui) {
1326 ...
1327 });</code></pre>
1328 </dd>
1329
1330 </dl>
1331 </div>
1332 </li>
1333
1334
1335 <li class="event" id="event-stop">
1336 <div class="event-header">
1337 <h3 class="event-name"><a href="#event-stop">stop</a></h3>
1338 <dl>
1339 <dt class="event-type-label">Type:</dt>
1340 <dd class="event-type">sortstop</dd>
1341 </dl>
1342 </div>
1343 <div class="event-description">
1344 <p>This event is triggered when sorting has stopped.</p>
1345 </div>
1346 <div class="event-examples">
1347 <h4>Code examples</h4>
1348 <dl class="event-examples-list">
1349
1350 <dt>
1351 Supply a callback function to handle the <code>stop</code> event as an init option.
1352 </dt>
1353 <dd>
1354 <pre><code>$( &quot;.selector&quot; ).sortable({
1355 stop: function(event, ui) { ... }
1356 });</code></pre>
1357 </dd>
1358
1359
1360 <dt>
1361 Bind to the <code>stop</code> event by type: <code>sortstop</code>.
1362 </dt>
1363 <dd>
1364 <pre><code>$( &quot;.selector&quot; ).bind( &quot;sortstop&quot;, function(event, ui) {
1365 ...
1366 });</code></pre>
1367 </dd>
1368
1369 </dl>
1370 </div>
1371 </li>
1372
1373
1374 <li class="event" id="event-update">
1375 <div class="event-header">
1376 <h3 class="event-name"><a href="#event-update">update</a></h3>
1377 <dl>
1378 <dt class="event-type-label">Type:</dt>
1379 <dd class="event-type">sortupdate</dd>
1380 </dl>
1381 </div>
1382 <div class="event-description">
1383 <p>This event is triggered when the user stopped sorting and the DOM position has changed.</p>
1384 </div>
1385 <div class="event-examples">
1386 <h4>Code examples</h4>
1387 <dl class="event-examples-list">
1388
1389 <dt>
1390 Supply a callback function to handle the <code>update</code> event as an init option.
1391 </dt>
1392 <dd>
1393 <pre><code>$( &quot;.selector&quot; ).sortable({
1394 update: function(event, ui) { ... }
1395 });</code></pre>
1396 </dd>
1397
1398
1399 <dt>
1400 Bind to the <code>update</code> event by type: <code>sortupdate</code>.
1401 </dt>
1402 <dd>
1403 <pre><code>$( &quot;.selector&quot; ).bind( &quot;sortupdate&quot;, function(event, ui) {
1404 ...
1405 });</code></pre>
1406 </dd>
1407
1408 </dl>
1409 </div>
1410 </li>
1411
1412
1413 <li class="event" id="event-receive">
1414 <div class="event-header">
1415 <h3 class="event-name"><a href="#event-receive">receive</a></h3>
1416 <dl>
1417 <dt class="event-type-label">Type:</dt>
1418 <dd class="event-type">sortreceive</dd>
1419 </dl>
1420 </div>
1421 <div class="event-description">
1422 <p>This event is triggered when a connected sortable list has received an item from another list.</p>
1423 </div>
1424 <div class="event-examples">
1425 <h4>Code examples</h4>
1426 <dl class="event-examples-list">
1427
1428 <dt>
1429 Supply a callback function to handle the <code>receive</code> event as an init option.
1430 </dt>
1431 <dd>
1432 <pre><code>$( &quot;.selector&quot; ).sortable({
1433 receive: function(event, ui) { ... }
1434 });</code></pre>
1435 </dd>
1436
1437
1438 <dt>
1439 Bind to the <code>receive</code> event by type: <code>sortreceive</code>.
1440 </dt>
1441 <dd>
1442 <pre><code>$( &quot;.selector&quot; ).bind( &quot;sortreceive&quot;, function(event, ui) {
1443 ...
1444 });</code></pre>
1445 </dd>
1446
1447 </dl>
1448 </div>
1449 </li>
1450
1451
1452 <li class="event" id="event-remove">
1453 <div class="event-header">
1454 <h3 class="event-name"><a href="#event-remove">remove</a></h3>
1455 <dl>
1456 <dt class="event-type-label">Type:</dt>
1457 <dd class="event-type">sortremove</dd>
1458 </dl>
1459 </div>
1460 <div class="event-description">
1461 <p>This event is triggered when a sortable item has been dragged out from the list and into another.</p>
1462 </div>
1463 <div class="event-examples">
1464 <h4>Code examples</h4>
1465 <dl class="event-examples-list">
1466
1467 <dt>
1468 Supply a callback function to handle the <code>remove</code> event as an init option.
1469 </dt>
1470 <dd>
1471 <pre><code>$( &quot;.selector&quot; ).sortable({
1472 remove: function(event, ui) { ... }
1473 });</code></pre>
1474 </dd>
1475
1476
1477 <dt>
1478 Bind to the <code>remove</code> event by type: <code>sortremove</code>.
1479 </dt>
1480 <dd>
1481 <pre><code>$( &quot;.selector&quot; ).bind( &quot;sortremove&quot;, function(event, ui) {
1482 ...
1483 });</code></pre>
1484 </dd>
1485
1486 </dl>
1487 </div>
1488 </li>
1489
1490
1491 <li class="event" id="event-over">
1492 <div class="event-header">
1493 <h3 class="event-name"><a href="#event-over">over</a></h3>
1494 <dl>
1495 <dt class="event-type-label">Type:</dt>
1496 <dd class="event-type">sortover</dd>
1497 </dl>
1498 </div>
1499 <div class="event-description">
1500 <p>This event is triggered when a sortable item is moved into a connected list.</p>
1501 </div>
1502 <div class="event-examples">
1503 <h4>Code examples</h4>
1504 <dl class="event-examples-list">
1505
1506 <dt>
1507 Supply a callback function to handle the <code>over</code> event as an init option.
1508 </dt>
1509 <dd>
1510 <pre><code>$( &quot;.selector&quot; ).sortable({
1511 over: function(event, ui) { ... }
1512 });</code></pre>
1513 </dd>
1514
1515
1516 <dt>
1517 Bind to the <code>over</code> event by type: <code>sortover</code>.
1518 </dt>
1519 <dd>
1520 <pre><code>$( &quot;.selector&quot; ).bind( &quot;sortover&quot;, function(event, ui) {
1521 ...
1522 });</code></pre>
1523 </dd>
1524
1525 </dl>
1526 </div>
1527 </li>
1528
1529
1530 <li class="event" id="event-out">
1531 <div class="event-header">
1532 <h3 class="event-name"><a href="#event-out">out</a></h3>
1533 <dl>
1534 <dt class="event-type-label">Type:</dt>
1535 <dd class="event-type">sortout</dd>
1536 </dl>
1537 </div>
1538 <div class="event-description">
1539 <p>This event is triggered when a sortable item is moved away from a connected list.</p>
1540 </div>
1541 <div class="event-examples">
1542 <h4>Code examples</h4>
1543 <dl class="event-examples-list">
1544
1545 <dt>
1546 Supply a callback function to handle the <code>out</code> event as an init option.
1547 </dt>
1548 <dd>
1549 <pre><code>$( &quot;.selector&quot; ).sortable({
1550 out: function(event, ui) { ... }
1551 });</code></pre>
1552 </dd>
1553
1554
1555 <dt>
1556 Bind to the <code>out</code> event by type: <code>sortout</code>.
1557 </dt>
1558 <dd>
1559 <pre><code>$( &quot;.selector&quot; ).bind( &quot;sortout&quot;, function(event, ui) {
1560 ...
1561 });</code></pre>
1562 </dd>
1563
1564 </dl>
1565 </div>
1566 </li>
1567
1568
1569 <li class="event" id="event-activate">
1570 <div class="event-header">
1571 <h3 class="event-name"><a href="#event-activate">activate</a></h3>
1572 <dl>
1573 <dt class="event-type-label">Type:</dt>
1574 <dd class="event-type">sortactivate</dd>
1575 </dl>
1576 </div>
1577 <div class="event-description">
1578 <p>This event is triggered when using connected lists, every connected list on drag start receives it.</p>
1579 </div>
1580 <div class="event-examples">
1581 <h4>Code examples</h4>
1582 <dl class="event-examples-list">
1583
1584 <dt>
1585 Supply a callback function to handle the <code>activate</code> event as an init option.
1586 </dt>
1587 <dd>
1588 <pre><code>$( &quot;.selector&quot; ).sortable({
1589 activate: function(event, ui) { ... }
1590 });</code></pre>
1591 </dd>
1592
1593
1594 <dt>
1595 Bind to the <code>activate</code> event by type: <code>sortactivate</code>.
1596 </dt>
1597 <dd>
1598 <pre><code>$( &quot;.selector&quot; ).bind( &quot;sortactivate&quot;, function(event, ui) {
1599 ...
1600 });</code></pre>
1601 </dd>
1602
1603 </dl>
1604 </div>
1605 </li>
1606
1607
1608 <li class="event" id="event-deactivate">
1609 <div class="event-header">
1610 <h3 class="event-name"><a href="#event-deactivate">deactivate</a></h3>
1611 <dl>
1612 <dt class="event-type-label">Type:</dt>
1613 <dd class="event-type">sortdeactivate</dd>
1614 </dl>
1615 </div>
1616 <div class="event-description">
1617 <p>This event is triggered when sorting was stopped, is propagated to all possible connected lists.</p>
1618 </div>
1619 <div class="event-examples">
1620 <h4>Code examples</h4>
1621 <dl class="event-examples-list">
1622
1623 <dt>
1624 Supply a callback function to handle the <code>deactivate</code> event as an init option.
1625 </dt>
1626 <dd>
1627 <pre><code>$( &quot;.selector&quot; ).sortable({
1628 deactivate: function(event, ui) { ... }
1629 });</code></pre>
1630 </dd>
1631
1632
1633 <dt>
1634 Bind to the <code>deactivate</code> event by type: <code>sortdeactivate</code>.
1635 </dt>
1636 <dd>
1637 <pre><code>$( &quot;.selector&quot; ).bind( &quot;sortdeactivate&quot;, function(event, ui) {
1638 ...
1639 });</code></pre>
1640 </dd>
1641
1642 </dl>
1643 </div>
1644 </li>
1645
1646 </ul>
1647 </div>
1648 <div id="methods">
1649 <h2 class="top-header">Methods</h2>
1650 <ul class="methods-list">
1651
1652 <li class="method" id="method-destroy">
1653 <div class="method-header">
1654 <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
1655 <dl>
1656 <dt class="method-signature-label">Signature:</dt>
1657 <dd class="method-signature">.sortable( "destroy"
1658
1659
1660
1661
1662
1663
1664
1665 )</dd>
1666 </dl>
1667 </div>
1668 <div class="method-description">
1669 <p>Remove the sortable functionality completely. This will return the element back to its pre-init state.</p>
1670 </div>
1671 </li>
1672
1673
1674 <li class="method" id="method-disable">
1675 <div class="method-header">
1676 <h3 class="method-name"><a href="#method-disable">disable</a></h3>
1677 <dl>
1678 <dt class="method-signature-label">Signature:</dt>
1679 <dd class="method-signature">.sortable( "disable"
1680
1681
1682
1683
1684
1685
1686
1687 )</dd>
1688 </dl>
1689 </div>
1690 <div class="method-description">
1691 <p>Disable the sortable.</p>
1692 </div>
1693 </li>
1694
1695
1696 <li class="method" id="method-enable">
1697 <div class="method-header">
1698 <h3 class="method-name"><a href="#method-enable">enable</a></h3>
1699 <dl>
1700 <dt class="method-signature-label">Signature:</dt>
1701 <dd class="method-signature">.sortable( "enable"
1702
1703
1704
1705
1706
1707
1708
1709 )</dd>
1710 </dl>
1711 </div>
1712 <div class="method-description">
1713 <p>Enable the sortable.</p>
1714 </div>
1715 </li>
1716
1717
1718 <li class="method" id="method-option">
1719 <div class="method-header">
1720 <h3 class="method-name"><a href="#method-option">option</a></h3>
1721 <dl>
1722 <dt class="method-signature-label">Signature:</dt>
1723 <dd class="method-signature">.sortable( "option"
1724
1725 , optionName
1726
1727 , <span class="optional">[</span>value<span class="optional">] </span>
1728
1729
1730
1731 )</dd>
1732 </dl>
1733 </div>
1734 <div class="method-description">
1735 <p>Get or set any sortable option. If no value is specified, will act as a getter.</p>
1736 </div>
1737 </li>
1738
1739
1740 <li class="method" id="method-option">
1741 <div class="method-header">
1742 <h3 class="method-name"><a href="#method-option">option</a></h3>
1743 <dl>
1744 <dt class="method-signature-label">Signature:</dt>
1745 <dd class="method-signature">.sortable( "option"
1746
1747 , options
1748
1749
1750
1751
1752
1753 )</dd>
1754 </dl>
1755 </div>
1756 <div class="method-description">
1757 <p>Set multiple sortable options at once by providing an options object.</p>
1758 </div>
1759 </li>
1760
1761
1762 <li class="method" id="method-widget">
1763 <div class="method-header">
1764 <h3 class="method-name"><a href="#method-widget">widget</a></h3>
1765 <dl>
1766 <dt class="method-signature-label">Signature:</dt>
1767 <dd class="method-signature">.sortable( "widget"
1768
1769
1770
1771
1772
1773
1774
1775 )</dd>
1776 </dl>
1777 </div>
1778 <div class="method-description">
1779 <p>Returns the .ui-sortable element.</p>
1780 </div>
1781 </li>
1782
1783
1784 <li class="method" id="method-serialize">
1785 <div class="method-header">
1786 <h3 class="method-name"><a href="#method-serialize">serialize</a></h3>
1787 <dl>
1788 <dt class="method-signature-label">Signature:</dt>
1789 <dd class="method-signature">.sortable( "serialize"
1790
1791 , <span class="optional">[</span>options<span class="optional">] </span>
1792
1793
1794
1795
1796
1797 )</dd>
1798 </dl>
1799 </div>
1800 <div class="method-description">
1801 <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.
1802 </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".
1803 </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).
1804 </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>
1805 </div>
1806 </li>
1807
1808
1809 <li class="method" id="method-toArray">
1810 <div class="method-header">
1811 <h3 class="method-name"><a href="#method-toArray">toArray</a></h3>
1812 <dl>
1813 <dt class="method-signature-label">Signature:</dt>
1814 <dd class="method-signature">.sortable( "toArray"
1815
1816
1817
1818
1819
1820
1821
1822 )</dd>
1823 </dl>
1824 </div>
1825 <div class="method-description">
1826 <p>Serializes the sortable's item id's into an array of string. If you have
1827 </p>
1828 <pre>
1829 &lt;ul id=&quot;a_sortable&quot;&gt;&lt;br&gt;
1830 &lt;li id=&quot;hello&quot;&gt;Hello&lt;/li&gt;&lt;br&gt;
1831 &lt;li id=&quot;goodbye&quot;&gt;Good bye&lt;/li&gt;&lt;br&gt;
1832 &lt;/ul&gt;
1833 </pre>
1834 <p>and do
1835 </p>
1836 <pre>var result = $('#a_sortable').sortable('toArray');</pre>
1837 <p>then
1838 </p>
1839 <pre>result[0] will contain &quot;hello&quot; and result[1] will contain &quot;goodbye&quot;.</pre></p>
1840 </div>
1841 </li>
1842
1843 <p>
1844 <li class="method" id="method-refresh">
1845 <div class="method-header">
1846 <h3 class="method-name"><a href="#method-refresh">refresh</a></h3>
1847 <dl>
1848 <dt class="method-signature-label">Signature:</dt>
1849 <dd class="method-signature">.sortable( "refresh"
1850
1851
1852
1853
1854
1855
1856
1857 )</dd>
1858 </dl>
1859 </div>
1860 <div class="method-description">
1861 <p>Refresh the sortable items. Custom trigger the reloading of all sortable items, causing new items to be recognized.</p>
1862 </div>
1863 </li>
1864
1865
1866 <li class="method" id="method-refreshPositions">
1867 <div class="method-header">
1868 <h3 class="method-name"><a href="#method-refreshPositions">refreshPositions</a></h3>
1869 <dl>
1870 <dt class="method-signature-label">Signature:</dt>
1871 <dd class="method-signature">.sortable( "refreshPositions"
1872
1873
1874
1875
1876
1877
1878
1879 )</dd>
1880 </dl>
1881 </div>
1882 <div class="method-description">
1883 <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>
1884 </div>
1885 </li>
1886
1887
1888 <li class="method" id="method-cancel">
1889 <div class="method-header">
1890 <h3 class="method-name"><a href="#method-cancel">cancel</a></h3>
1891 <dl>
1892 <dt class="method-signature-label">Signature:</dt>
1893 <dd class="method-signature">.sortable( "cancel"
1894
1895
1896
1897
1898
1899
1900
1901 )</dd>
1902 </dl>
1903 </div>
1904 <div class="method-description">
1905 <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.
1906 </p><p>If the sortable item is not being moved from one connected sortable to another:
1907 </p>
1908 <pre>$(this).sortable('cancel');</pre>
1909 <p>will cancel the change.
1910 </p><p>If the sortable item is being moved from one connected sortable to another:
1911 </p>
1912 <pre>$(ui.sender).sortable('cancel');</pre>
1913 <p>will cancel the change. Useful in the 'receive' callback.</p>
1914 </div>
1915 </li>
1916
1917 </ul>
1918 </div>
1919 <div id="theming">
1920 <h2 class="top-header">Theming</h2>
1921 <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.
1922 </p>
1923 <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.
1924 </p>
1925
1926 <h3>Sample markup with jQuery UI CSS Framework classes</h3>
1927 &lt;ul class=&quot;<strong>ui-sortable</strong>&quot;&gt;<br />
1928 &#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
1929 &#160;&#160;&#160;&lt;li class=&quot;<strong>ui-sortable-helper</strong>&quot;&gt;&lt;/li&gt;<br />
1930 &#160;&#160;&#160;&lt;li class=&quot;<strong>ui-sortable-placeholder</strong>&quot;&gt;&lt;/li&gt;<br />
1931 &#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
1932 &lt;/ul&gt;
1933 <p class="theme-note">
1934 <strong>
1935 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 />
1936 &#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
1937 &#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
1938 &#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
1939 &lt;/ul&gt;.
1940 </strong>
1941 </p>
1942
1943 </div>
1944 </div>
1945
1946 </p><!--
1947 Pre-expand include size: 74974 bytes
1948 Post-expand include size: 129536 bytes
1949 Template argument size: 73118 bytes
1950 Maximum: 2097152 bytes
1951 -->
1952
1953 <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3772-1!1!0!!en!2 and timestamp 20110617203224 -->