Project

General

Profile

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
</ul>
30
    </div>
31
    <div id="overview-example">
32
        <h3>Example</h3>
33
        <div id="overview-example" class="example">
34
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
35
<p><div id="demo" class="tabs-container" rel="100">
36
A simple jQuery UI Sortable.<br />
37
</p>
38
<pre>$(&quot;#sortable&quot;).sortable();
39
</pre>
40
<p></div><div id="source" class="tabs-container">
41
</p>
42
<pre>&lt;!DOCTYPE html&gt;
43
&lt;html&gt;
44
&lt;head&gt;
45
  &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;
46
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&quot;&gt;&lt;/script&gt;
47
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
48
  
49
  &lt;script&gt;
50
  $(document).ready(function() {
51
    $(&quot;#sortable&quot;).sortable();
52
  });
53
  &lt;/script&gt;
54
&lt;/head&gt;
55
&lt;body style="font-size:62.5%;"&gt;
56
  
57
&lt;ul id=&quot;sortable&quot;&gt;
58
&lt;li&gt;Item 1&lt;/li&gt;
59
&lt;li&gt;Item 2&lt;/li&gt;
60
&lt;li&gt;Item 3&lt;/li&gt;
61
&lt;li&gt;Item 4&lt;/li&gt;
62
&lt;li&gt;Item 5&lt;/li&gt;
63
&lt;/ul&gt;
64

    
65
&lt;/body&gt;
66
&lt;/html&gt;
67
</pre>
68
<p></div>
69
</p><p></div>
70
    </div>
71
  </div>
72
  <div id="options">
73
    <h2 class="top-header">Options</h2>
74
    <ul class="options-list">
75
      
76
<li class="option" id="option-disabled">
77
  <div class="option-header">
78
    <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
79
    <dl>
80
      <dt class="option-type-label">Type:</dt>
81
        <dd class="option-type">Boolean</dd>
82
      
83
      <dt class="option-default-label">Default:</dt>
84
        <dd class="option-default">false</dd>
85
      
86
    </dl>
87
  </div>
88
  <div class="option-description">
89
    <p>Disables (true) or enables (false) the sortable. Can be set when initialising (first creating) the sortable.</p>
90
  </div>
91
  <div class="option-examples">
92
    <h4>Code examples</h4>
93
    <dl class="option-examples-list">
94
    
95
<dt>
96
  Initialize a sortable with the <code>disabled</code> option specified.
97
</dt>
98
<dd>
99
<pre><code>$( ".selector" ).sortable({ disabled: true });</code></pre>
100
</dd>
101

    
102
    
103
<dt>
104
  Get or set the <code>disabled</code> option, after init.
105
</dt>
106
<dd>
107
<pre><code>//getter
108
var disabled = $( ".selector" ).sortable( "option", "disabled" );
109
//setter
110
$( ".selector" ).sortable( "option", "disabled", true );</code></pre>
111
</dd>
112

    
113
    </dl>
114
  </div>
115
</li>
116

    
117

    
118
<li class="option" id="option-appendTo">
119
  <div class="option-header">
120
    <h3 class="option-name"><a href="#option-appendTo">appendTo</a></h3>
121
    <dl>
122
      <dt class="option-type-label">Type:</dt>
123
        <dd class="option-type">String</dd>
124
      
125
      <dt class="option-default-label">Default:</dt>
126
        <dd class="option-default">'parent'</dd>
127
      
128
    </dl>
129
  </div>
130
  <div class="option-description">
131
    <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>
132
  </div>
133
  <div class="option-examples">
134
    <h4>Code examples</h4>
135
    <dl class="option-examples-list">
136
    
137
<dt>
138
  Initialize a sortable with the <code>appendTo</code> option specified.
139
</dt>
140
<dd>
141
<pre><code>$( ".selector" ).sortable({ appendTo: 'body' });</code></pre>
142
</dd>
143

    
144
    
145
<dt>
146
  Get or set the <code>appendTo</code> option, after init.
147
</dt>
148
<dd>
149
<pre><code>//getter
150
var appendTo = $( ".selector" ).sortable( "option", "appendTo" );
151
//setter
152
$( ".selector" ).sortable( "option", "appendTo", 'body' );</code></pre>
153
</dd>
154

    
155
    </dl>
156
  </div>
157
</li>
158

    
159

    
160
<li class="option" id="option-axis">
161
  <div class="option-header">
162
    <h3 class="option-name"><a href="#option-axis">axis</a></h3>
163
    <dl>
164
      <dt class="option-type-label">Type:</dt>
165
        <dd class="option-type">String</dd>
166
      
167
      <dt class="option-default-label">Default:</dt>
168
        <dd class="option-default">false</dd>
169
      
170
    </dl>
171
  </div>
172
  <div class="option-description">
173
    <p>If defined, the items can be dragged only horizontally or vertically. Possible values:'x', 'y'.</p>
174
  </div>
175
  <div class="option-examples">
176
    <h4>Code examples</h4>
177
    <dl class="option-examples-list">
178
    
179
<dt>
180
  Initialize a sortable with the <code>axis</code> option specified.
181
</dt>
182
<dd>
183
<pre><code>$( ".selector" ).sortable({ axis: 'x' });</code></pre>
184
</dd>
185

    
186
    
187
<dt>
188
  Get or set the <code>axis</code> option, after init.
189
</dt>
190
<dd>
191
<pre><code>//getter
192
var axis = $( ".selector" ).sortable( "option", "axis" );
193
//setter
194
$( ".selector" ).sortable( "option", "axis", 'x' );</code></pre>
195
</dd>
196

    
197
    </dl>
198
  </div>
199
</li>
200

    
201

    
202
<li class="option" id="option-cancel">
203
  <div class="option-header">
204
    <h3 class="option-name"><a href="#option-cancel">cancel</a></h3>
205
    <dl>
206
      <dt class="option-type-label">Type:</dt>
207
        <dd class="option-type">Selector</dd>
208
      
209
      <dt class="option-default-label">Default:</dt>
210
        <dd class="option-default">':input,button'</dd>
211
      
212
    </dl>
213
  </div>
214
  <div class="option-description">
215
    <p>Prevents sorting if you start on elements matching the selector.</p>
216
  </div>
217
  <div class="option-examples">
218
    <h4>Code examples</h4>
219
    <dl class="option-examples-list">
220
    
221
<dt>
222
  Initialize a sortable with the <code>cancel</code> option specified.
223
</dt>
224
<dd>
225
<pre><code>$( ".selector" ).sortable({ cancel: 'button' });</code></pre>
226
</dd>
227

    
228
    
229
<dt>
230
  Get or set the <code>cancel</code> option, after init.
231
</dt>
232
<dd>
233
<pre><code>//getter
234
var cancel = $( ".selector" ).sortable( "option", "cancel" );
235
//setter
236
$( ".selector" ).sortable( "option", "cancel", 'button' );</code></pre>
237
</dd>
238

    
239
    </dl>
240
  </div>
241
</li>
242

    
243

    
244
<li class="option" id="option-connectWith">
245
  <div class="option-header">
246
    <h3 class="option-name"><a href="#option-connectWith">connectWith</a></h3>
247
    <dl>
248
      <dt class="option-type-label">Type:</dt>
249
        <dd class="option-type">Selector</dd>
250
      
251
      <dt class="option-default-label">Default:</dt>
252
        <dd class="option-default">false</dd>
253
      
254
    </dl>
255
  </div>
256
  <div class="option-description">
257
    <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>
258
  </div>
259
  <div class="option-examples">
260
    <h4>Code examples</h4>
261
    <dl class="option-examples-list">
262
    
263
<dt>
264
  Initialize a sortable with the <code>connectWith</code> option specified.
265
</dt>
266
<dd>
267
<pre><code>$( ".selector" ).sortable({ connectWith: '.otherlist' });</code></pre>
268
</dd>
269

    
270
    
271
<dt>
272
  Get or set the <code>connectWith</code> option, after init.
273
</dt>
274
<dd>
275
<pre><code>//getter
276
var connectWith = $( ".selector" ).sortable( "option", "connectWith" );
277
//setter
278
$( ".selector" ).sortable( "option", "connectWith", '.otherlist' );</code></pre>
279
</dd>
280

    
281
    </dl>
282
  </div>
283
</li>
284

    
285

    
286
<li class="option" id="option-containment">
287
  <div class="option-header">
288
    <h3 class="option-name"><a href="#option-containment">containment</a></h3>
289
    <dl>
290
      <dt class="option-type-label">Type:</dt>
291
        <dd class="option-type">Element, String, Selector</dd>
292
      
293
      <dt class="option-default-label">Default:</dt>
294
        <dd class="option-default">false</dd>
295
      
296
    </dl>
297
  </div>
298
  <div class="option-description">
299
    <p>Constrains dragging to within the bounds of the specified element - can be a DOM element, 'parent', 'document', 'window', or a jQuery selector.</p>
300
  </div>
301
  <div class="option-examples">
302
    <h4>Code examples</h4>
303
    <dl class="option-examples-list">
304
    
305
<dt>
306
  Initialize a sortable with the <code>containment</code> option specified.
307
</dt>
308
<dd>
309
<pre><code>$( ".selector" ).sortable({ containment: 'parent' });</code></pre>
310
</dd>
311

    
312
    
313
<dt>
314
  Get or set the <code>containment</code> option, after init.
315
</dt>
316
<dd>
317
<pre><code>//getter
318
var containment = $( ".selector" ).sortable( "option", "containment" );
319
//setter
320
$( ".selector" ).sortable( "option", "containment", 'parent' );</code></pre>
321
</dd>
322

    
323
    </dl>
324
  </div>
325
</li>
326

    
327

    
328
<li class="option" id="option-cursor">
329
  <div class="option-header">
330
    <h3 class="option-name"><a href="#option-cursor">cursor</a></h3>
331
    <dl>
332
      <dt class="option-type-label">Type:</dt>
333
        <dd class="option-type">String</dd>
334
      
335
      <dt class="option-default-label">Default:</dt>
336
        <dd class="option-default">'auto'</dd>
337
      
338
    </dl>
339
  </div>
340
  <div class="option-description">
341
    <p>Defines the cursor that is being shown while sorting.</p>
342
  </div>
343
  <div class="option-examples">
344
    <h4>Code examples</h4>
345
    <dl class="option-examples-list">
346
    
347
<dt>
348
  Initialize a sortable with the <code>cursor</code> option specified.
349
</dt>
350
<dd>
351
<pre><code>$( ".selector" ).sortable({ cursor: 'crosshair' });</code></pre>
352
</dd>
353

    
354
    
355
<dt>
356
  Get or set the <code>cursor</code> option, after init.
357
</dt>
358
<dd>
359
<pre><code>//getter
360
var cursor = $( ".selector" ).sortable( "option", "cursor" );
361
//setter
362
$( ".selector" ).sortable( "option", "cursor", 'crosshair' );</code></pre>
363
</dd>
364

    
365
    </dl>
366
  </div>
367
</li>
368

    
369

    
370
<li class="option" id="option-cursorAt">
371
  <div class="option-header">
372
    <h3 class="option-name"><a href="#option-cursorAt">cursorAt</a></h3>
373
    <dl>
374
      <dt class="option-type-label">Type:</dt>
375
        <dd class="option-type">Object</dd>
376
      
377
      <dt class="option-default-label">Default:</dt>
378
        <dd class="option-default">false</dd>
379
      
380
    </dl>
381
  </div>
382
  <div class="option-description">
383
    <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>
384
  </div>
385
  <div class="option-examples">
386
    <h4>Code examples</h4>
387
    <dl class="option-examples-list">
388
    
389
<dt>
390
  Initialize a sortable with the <code>cursorAt</code> option specified.
391
</dt>
392
<dd>
393
<pre><code>$( ".selector" ).sortable({ cursorAt: 'top' });</code></pre>
394
</dd>
395

    
396
    
397
<dt>
398
  Get or set the <code>cursorAt</code> option, after init.
399
</dt>
400
<dd>
401
<pre><code>//getter
402
var cursorAt = $( ".selector" ).sortable( "option", "cursorAt" );
403
//setter
404
$( ".selector" ).sortable( "option", "cursorAt", 'top' );</code></pre>
405
</dd>
406

    
407
    </dl>
408
  </div>
409
</li>
410

    
411

    
412
<li class="option" id="option-delay">
413
  <div class="option-header">
414
    <h3 class="option-name"><a href="#option-delay">delay</a></h3>
415
    <dl>
416
      <dt class="option-type-label">Type:</dt>
417
        <dd class="option-type">Integer</dd>
418
      
419
      <dt class="option-default-label">Default:</dt>
420
        <dd class="option-default">0</dd>
421
      
422
    </dl>
423
  </div>
424
  <div class="option-description">
425
    <p>Time in milliseconds to define when the sorting should start. It helps preventing unwanted drags when clicking on an element.</p>
426
  </div>
427
  <div class="option-examples">
428
    <h4>Code examples</h4>
429
    <dl class="option-examples-list">
430
    
431
<dt>
432
  Initialize a sortable with the <code>delay</code> option specified.
433
</dt>
434
<dd>
435
<pre><code>$( ".selector" ).sortable({ delay: 500 });</code></pre>
436
</dd>
437

    
438
    
439
<dt>
440
  Get or set the <code>delay</code> option, after init.
441
</dt>
442
<dd>
443
<pre><code>//getter
444
var delay = $( ".selector" ).sortable( "option", "delay" );
445
//setter
446
$( ".selector" ).sortable( "option", "delay", 500 );</code></pre>
447
</dd>
448

    
449
    </dl>
450
  </div>
451
</li>
452

    
453

    
454
<li class="option" id="option-distance">
455
  <div class="option-header">
456
    <h3 class="option-name"><a href="#option-distance">distance</a></h3>
457
    <dl>
458
      <dt class="option-type-label">Type:</dt>
459
        <dd class="option-type">Integer</dd>
460
      
461
      <dt class="option-default-label">Default:</dt>
462
        <dd class="option-default">1</dd>
463
      
464
    </dl>
465
  </div>
466
  <div class="option-description">
467
    <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>
468
  </div>
469
  <div class="option-examples">
470
    <h4>Code examples</h4>
471
    <dl class="option-examples-list">
472
    
473
<dt>
474
  Initialize a sortable with the <code>distance</code> option specified.
475
</dt>
476
<dd>
477
<pre><code>$( ".selector" ).sortable({ distance: 30 });</code></pre>
478
</dd>
479

    
480
    
481
<dt>
482
  Get or set the <code>distance</code> option, after init.
483
</dt>
484
<dd>
485
<pre><code>//getter
486
var distance = $( ".selector" ).sortable( "option", "distance" );
487
//setter
488
$( ".selector" ).sortable( "option", "distance", 30 );</code></pre>
489
</dd>
490

    
491
    </dl>
492
  </div>
493
</li>
494

    
495

    
496
<li class="option" id="option-dropOnEmpty">
497
  <div class="option-header">
498
    <h3 class="option-name"><a href="#option-dropOnEmpty">dropOnEmpty</a></h3>
499
    <dl>
500
      <dt class="option-type-label">Type:</dt>
501
        <dd class="option-type">Boolean</dd>
502
      
503
      <dt class="option-default-label">Default:</dt>
504
        <dd class="option-default">true</dd>
505
      
506
    </dl>
507
  </div>
508
  <div class="option-description">
509
    <p>If false items from this sortable can't be dropped to an empty linked sortable.</p>
510
  </div>
511
  <div class="option-examples">
512
    <h4>Code examples</h4>
513
    <dl class="option-examples-list">
514
    
515
<dt>
516
  Initialize a sortable with the <code>dropOnEmpty</code> option specified.
517
</dt>
518
<dd>
519
<pre><code>$( ".selector" ).sortable({ dropOnEmpty: false });</code></pre>
520
</dd>
521

    
522
    
523
<dt>
524
  Get or set the <code>dropOnEmpty</code> option, after init.
525
</dt>
526
<dd>
527
<pre><code>//getter
528
var dropOnEmpty = $( ".selector" ).sortable( "option", "dropOnEmpty" );
529
//setter
530
$( ".selector" ).sortable( "option", "dropOnEmpty", false );</code></pre>
531
</dd>
532

    
533
    </dl>
534
  </div>
535
</li>
536

    
537

    
538
<li class="option" id="option-forceHelperSize">
539
  <div class="option-header">
540
    <h3 class="option-name"><a href="#option-forceHelperSize">forceHelperSize</a></h3>
541
    <dl>
542
      <dt class="option-type-label">Type:</dt>
543
        <dd class="option-type">Boolean</dd>
544
      
545
      <dt class="option-default-label">Default:</dt>
546
        <dd class="option-default">false</dd>
547
      
548
    </dl>
549
  </div>
550
  <div class="option-description">
551
    <p>If true, forces the helper to have a size.</p>
552
  </div>
553
  <div class="option-examples">
554
    <h4>Code examples</h4>
555
    <dl class="option-examples-list">
556
    
557
<dt>
558
  Initialize a sortable with the <code>forceHelperSize</code> option specified.
559
</dt>
560
<dd>
561
<pre><code>$( ".selector" ).sortable({ forceHelperSize: true });</code></pre>
562
</dd>
563

    
564
    
565
<dt>
566
  Get or set the <code>forceHelperSize</code> option, after init.
567
</dt>
568
<dd>
569
<pre><code>//getter
570
var forceHelperSize = $( ".selector" ).sortable( "option", "forceHelperSize" );
571
//setter
572
$( ".selector" ).sortable( "option", "forceHelperSize", true );</code></pre>
573
</dd>
574

    
575
    </dl>
576
  </div>
577
</li>
578

    
579

    
580
<li class="option" id="option-forcePlaceholderSize">
581
  <div class="option-header">
582
    <h3 class="option-name"><a href="#option-forcePlaceholderSize">forcePlaceholderSize</a></h3>
583
    <dl>
584
      <dt class="option-type-label">Type:</dt>
585
        <dd class="option-type">Boolean</dd>
586
      
587
      <dt class="option-default-label">Default:</dt>
588
        <dd class="option-default">false</dd>
589
      
590
    </dl>
591
  </div>
592
  <div class="option-description">
593
    <p>If true, forces the placeholder to have a size.</p>
594
  </div>
595
  <div class="option-examples">
596
    <h4>Code examples</h4>
597
    <dl class="option-examples-list">
598
    
599
<dt>
600
  Initialize a sortable with the <code>forcePlaceholderSize</code> option specified.
601
</dt>
602
<dd>
603
<pre><code>$( ".selector" ).sortable({ forcePlaceholderSize: true });</code></pre>
604
</dd>
605

    
606
    
607
<dt>
608
  Get or set the <code>forcePlaceholderSize</code> option, after init.
609
</dt>
610
<dd>
611
<pre><code>//getter
612
var forcePlaceholderSize = $( ".selector" ).sortable( "option", "forcePlaceholderSize" );
613
//setter
614
$( ".selector" ).sortable( "option", "forcePlaceholderSize", true );</code></pre>
615
</dd>
616

    
617
    </dl>
618
  </div>
619
</li>
620

    
621

    
622
<li class="option" id="option-grid">
623
  <div class="option-header">
624
    <h3 class="option-name"><a href="#option-grid">grid</a></h3>
625
    <dl>
626
      <dt class="option-type-label">Type:</dt>
627
        <dd class="option-type">Array</dd>
628
      
629
      <dt class="option-default-label">Default:</dt>
630
        <dd class="option-default">false</dd>
631
      
632
    </dl>
633
  </div>
634
  <div class="option-description">
635
    <p>Snaps the sorting element or helper to a grid, every x and y pixels. Array values: [x, y]</p>
636
  </div>
637
  <div class="option-examples">
638
    <h4>Code examples</h4>
639
    <dl class="option-examples-list">
640
    
641
<dt>
642
  Initialize a sortable with the <code>grid</code> option specified.
643
</dt>
644
<dd>
645
<pre><code>$( ".selector" ).sortable({ grid: [50, 20] });</code></pre>
646
</dd>
647

    
648
    
649
<dt>
650
  Get or set the <code>grid</code> option, after init.
651
</dt>
652
<dd>
653
<pre><code>//getter
654
var grid = $( ".selector" ).sortable( "option", "grid" );
655
//setter
656
$( ".selector" ).sortable( "option", "grid", [50, 20] );</code></pre>
657
</dd>
658

    
659
    </dl>
660
  </div>
661
</li>
662

    
663

    
664
<li class="option" id="option-handle">
665
  <div class="option-header">
666
    <h3 class="option-name"><a href="#option-handle">handle</a></h3>
667
    <dl>
668
      <dt class="option-type-label">Type:</dt>
669
        <dd class="option-type">Selector, Element</dd>
670
      
671
      <dt class="option-default-label">Default:</dt>
672
        <dd class="option-default">false</dd>
673
      
674
    </dl>
675
  </div>
676
  <div class="option-description">
677
    <p>Restricts sort start click to the specified element.</p>
678
  </div>
679
  <div class="option-examples">
680
    <h4>Code examples</h4>
681
    <dl class="option-examples-list">
682
    
683
<dt>
684
  Initialize a sortable with the <code>handle</code> option specified.
685
</dt>
686
<dd>
687
<pre><code>$( ".selector" ).sortable({ handle: 'h2' });</code></pre>
688
</dd>
689

    
690
    
691
<dt>
692
  Get or set the <code>handle</code> option, after init.
693
</dt>
694
<dd>
695
<pre><code>//getter
696
var handle = $( ".selector" ).sortable( "option", "handle" );
697
//setter
698
$( ".selector" ).sortable( "option", "handle", 'h2' );</code></pre>
699
</dd>
700

    
701
    </dl>
702
  </div>
703
</li>
704

    
705

    
706
<li class="option" id="option-helper">
707
  <div class="option-header">
708
    <h3 class="option-name"><a href="#option-helper">helper</a></h3>
709
    <dl>
710
      <dt class="option-type-label">Type:</dt>
711
        <dd class="option-type">String, Function</dd>
712
      
713
      <dt class="option-default-label">Default:</dt>
714
        <dd class="option-default">'original'</dd>
715
      
716
    </dl>
717
  </div>
718
  <div class="option-description">
719
    <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>
720
  </div>
721
  <div class="option-examples">
722
    <h4>Code examples</h4>
723
    <dl class="option-examples-list">
724
    
725
<dt>
726
  Initialize a sortable with the <code>helper</code> option specified.
727
</dt>
728
<dd>
729
<pre><code>$( ".selector" ).sortable({ helper: 'clone' });</code></pre>
730
</dd>
731

    
732
    
733
<dt>
734
  Get or set the <code>helper</code> option, after init.
735
</dt>
736
<dd>
737
<pre><code>//getter
738
var helper = $( ".selector" ).sortable( "option", "helper" );
739
//setter
740
$( ".selector" ).sortable( "option", "helper", 'clone' );</code></pre>
741
</dd>
742

    
743
    </dl>
744
  </div>
745
</li>
746

    
747

    
748
<li class="option" id="option-items">
749
  <div class="option-header">
750
    <h3 class="option-name"><a href="#option-items">items</a></h3>
751
    <dl>
752
      <dt class="option-type-label">Type:</dt>
753
        <dd class="option-type">Selector</dd>
754
      
755
      <dt class="option-default-label">Default:</dt>
756
        <dd class="option-default">'&gt; *'</dd>
757
      
758
    </dl>
759
  </div>
760
  <div class="option-description">
761
    <p>Specifies which items inside the element should be sortable.</p>
762
  </div>
763
  <div class="option-examples">
764
    <h4>Code examples</h4>
765
    <dl class="option-examples-list">
766
    
767
<dt>
768
  Initialize a sortable with the <code>items</code> option specified.
769
</dt>
770
<dd>
771
<pre><code>$( ".selector" ).sortable({ items: 'li' });</code></pre>
772
</dd>
773

    
774
    
775
<dt>
776
  Get or set the <code>items</code> option, after init.
777
</dt>
778
<dd>
779
<pre><code>//getter
780
var items = $( ".selector" ).sortable( "option", "items" );
781
//setter
782
$( ".selector" ).sortable( "option", "items", 'li' );</code></pre>
783
</dd>
784

    
785
    </dl>
786
  </div>
787
</li>
788

    
789

    
790
<li class="option" id="option-opacity">
791
  <div class="option-header">
792
    <h3 class="option-name"><a href="#option-opacity">opacity</a></h3>
793
    <dl>
794
      <dt class="option-type-label">Type:</dt>
795
        <dd class="option-type">Float</dd>
796
      
797
      <dt class="option-default-label">Default:</dt>
798
        <dd class="option-default">false</dd>
799
      
800
    </dl>
801
  </div>
802
  <div class="option-description">
803
    <p>Defines the opacity of the helper while sorting. From 0.01 to 1</p>
804
  </div>
805
  <div class="option-examples">
806
    <h4>Code examples</h4>
807
    <dl class="option-examples-list">
808
    
809
<dt>
810
  Initialize a sortable with the <code>opacity</code> option specified.
811
</dt>
812
<dd>
813
<pre><code>$( ".selector" ).sortable({ opacity: 0.6 });</code></pre>
814
</dd>
815

    
816
    
817
<dt>
818
  Get or set the <code>opacity</code> option, after init.
819
</dt>
820
<dd>
821
<pre><code>//getter
822
var opacity = $( ".selector" ).sortable( "option", "opacity" );
823
//setter
824
$( ".selector" ).sortable( "option", "opacity", 0.6 );</code></pre>
825
</dd>
826

    
827
    </dl>
828
  </div>
829
</li>
830

    
831

    
832
<li class="option" id="option-placeholder">
833
  <div class="option-header">
834
    <h3 class="option-name"><a href="#option-placeholder">placeholder</a></h3>
835
    <dl>
836
      <dt class="option-type-label">Type:</dt>
837
        <dd class="option-type">String</dd>
838
      
839
      <dt class="option-default-label">Default:</dt>
840
        <dd class="option-default">false</dd>
841
      
842
    </dl>
843
  </div>
844
  <div class="option-description">
845
    <p>Class that gets applied to the otherwise white space.</p>
846
  </div>
847
  <div class="option-examples">
848
    <h4>Code examples</h4>
849
    <dl class="option-examples-list">
850
    
851
<dt>
852
  Initialize a sortable with the <code>placeholder</code> option specified.
853
</dt>
854
<dd>
855
<pre><code>$( ".selector" ).sortable({ placeholder: 'ui-state-highlight' });</code></pre>
856
</dd>
857

    
858
    
859
<dt>
860
  Get or set the <code>placeholder</code> option, after init.
861
</dt>
862
<dd>
863
<pre><code>//getter
864
var placeholder = $( ".selector" ).sortable( "option", "placeholder" );
865
//setter
866
$( ".selector" ).sortable( "option", "placeholder", 'ui-state-highlight' );</code></pre>
867
</dd>
868

    
869
    </dl>
870
  </div>
871
</li>
872

    
873

    
874
<li class="option" id="option-revert">
875
  <div class="option-header">
876
    <h3 class="option-name"><a href="#option-revert">revert</a></h3>
877
    <dl>
878
      <dt class="option-type-label">Type:</dt>
879
        <dd class="option-type">Boolean/Integer</dd>
880
      
881
      <dt class="option-default-label">Default:</dt>
882
        <dd class="option-default">false</dd>
883
      
884
    </dl>
885
  </div>
886
  <div class="option-description">
887
    <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>
888
  </div>
889
  <div class="option-examples">
890
    <h4>Code examples</h4>
891
    <dl class="option-examples-list">
892
    
893
<dt>
894
  Initialize a sortable with the <code>revert</code> option specified.
895
</dt>
896
<dd>
897
<pre><code>$( ".selector" ).sortable({ revert: true });</code></pre>
898
</dd>
899

    
900
    
901
<dt>
902
  Get or set the <code>revert</code> option, after init.
903
</dt>
904
<dd>
905
<pre><code>//getter
906
var revert = $( ".selector" ).sortable( "option", "revert" );
907
//setter
908
$( ".selector" ).sortable( "option", "revert", true );</code></pre>
909
</dd>
910

    
911
    </dl>
912
  </div>
913
</li>
914

    
915

    
916
<li class="option" id="option-scroll">
917
  <div class="option-header">
918
    <h3 class="option-name"><a href="#option-scroll">scroll</a></h3>
919
    <dl>
920
      <dt class="option-type-label">Type:</dt>
921
        <dd class="option-type">Boolean</dd>
922
      
923
      <dt class="option-default-label">Default:</dt>
924
        <dd class="option-default">true</dd>
925
      
926
    </dl>
927
  </div>
928
  <div class="option-description">
929
    <p>If set to true, the page scrolls when coming to an edge.</p>
930
  </div>
931
  <div class="option-examples">
932
    <h4>Code examples</h4>
933
    <dl class="option-examples-list">
934
    
935
<dt>
936
  Initialize a sortable with the <code>scroll</code> option specified.
937
</dt>
938
<dd>
939
<pre><code>$( ".selector" ).sortable({ scroll: false });</code></pre>
940
</dd>
941

    
942
    
943
<dt>
944
  Get or set the <code>scroll</code> option, after init.
945
</dt>
946
<dd>
947
<pre><code>//getter
948
var scroll = $( ".selector" ).sortable( "option", "scroll" );
949
//setter
950
$( ".selector" ).sortable( "option", "scroll", false );</code></pre>
951
</dd>
952

    
953
    </dl>
954
  </div>
955
</li>
956

    
957

    
958
<li class="option" id="option-scrollSensitivity">
959
  <div class="option-header">
960
    <h3 class="option-name"><a href="#option-scrollSensitivity">scrollSensitivity</a></h3>
961
    <dl>
962
      <dt class="option-type-label">Type:</dt>
963
        <dd class="option-type">Integer</dd>
964
      
965
      <dt class="option-default-label">Default:</dt>
966
        <dd class="option-default">20</dd>
967
      
968
    </dl>
969
  </div>
970
  <div class="option-description">
971
    <p>Defines how near the mouse must be to an edge to start scrolling.</p>
972
  </div>
973
  <div class="option-examples">
974
    <h4>Code examples</h4>
975
    <dl class="option-examples-list">
976
    
977
<dt>
978
  Initialize a sortable with the <code>scrollSensitivity</code> option specified.
979
</dt>
980
<dd>
981
<pre><code>$( ".selector" ).sortable({ scrollSensitivity: 40 });</code></pre>
982
</dd>
983

    
984
    
985
<dt>
986
  Get or set the <code>scrollSensitivity</code> option, after init.
987
</dt>
988
<dd>
989
<pre><code>//getter
990
var scrollSensitivity = $( ".selector" ).sortable( "option", "scrollSensitivity" );
991
//setter
992
$( ".selector" ).sortable( "option", "scrollSensitivity", 40 );</code></pre>
993
</dd>
994

    
995
    </dl>
996
  </div>
997
</li>
998

    
999

    
1000
<li class="option" id="option-scrollSpeed">
1001
  <div class="option-header">
1002
    <h3 class="option-name"><a href="#option-scrollSpeed">scrollSpeed</a></h3>
1003
    <dl>
1004
      <dt class="option-type-label">Type:</dt>
1005
        <dd class="option-type">Integer</dd>
1006
      
1007
      <dt class="option-default-label">Default:</dt>
1008
        <dd class="option-default">20</dd>
1009
      
1010
    </dl>
1011
  </div>
1012
  <div class="option-description">
1013
    <p>The speed at which the window should scroll once the mouse pointer gets within the scrollSensitivity distance.</p>
1014
  </div>
1015
  <div class="option-examples">
1016
    <h4>Code examples</h4>
1017
    <dl class="option-examples-list">
1018
    
1019
<dt>
1020
  Initialize a sortable with the <code>scrollSpeed</code> option specified.
1021
</dt>
1022
<dd>
1023
<pre><code>$( ".selector" ).sortable({ scrollSpeed: 40 });</code></pre>
1024
</dd>
1025

    
1026
    
1027
<dt>
1028
  Get or set the <code>scrollSpeed</code> option, after init.
1029
</dt>
1030
<dd>
1031
<pre><code>//getter
1032
var scrollSpeed = $( ".selector" ).sortable( "option", "scrollSpeed" );
1033
//setter
1034
$( ".selector" ).sortable( "option", "scrollSpeed", 40 );</code></pre>
1035
</dd>
1036

    
1037
    </dl>
1038
  </div>
1039
</li>
1040

    
1041

    
1042
<li class="option" id="option-tolerance">
1043
  <div class="option-header">
1044
    <h3 class="option-name"><a href="#option-tolerance">tolerance</a></h3>
1045
    <dl>
1046
      <dt class="option-type-label">Type:</dt>
1047
        <dd class="option-type">String</dd>
1048
      
1049
      <dt class="option-default-label">Default:</dt>
1050
        <dd class="option-default">'intersect'</dd>
1051
      
1052
    </dl>
1053
  </div>
1054
  <div class="option-description">
1055
    <p>This is the way the reordering behaves during drag. Possible values: 'intersect', 'pointer'. In some setups, 'pointer' is more natural.
1056
</p>
1057
<ul>
1058
<li><b>intersect</b>: draggable overlaps the droppable at least 50%</li>
1059
<li><b>pointer</b>: mouse pointer overlaps the droppable</li>
1060
</ul>
1061
<p></p>
1062
  </div>
1063
  <div class="option-examples">
1064
    <h4>Code examples</h4>
1065
    <dl class="option-examples-list">
1066
    
1067
<dt>
1068
  Initialize a sortable with the <code>tolerance</code> option specified.
1069
</dt>
1070
<dd>
1071
<pre><code>$( ".selector" ).sortable({ tolerance: 'pointer' });</code></pre>
1072
</dd>
1073

    
1074
    
1075
<dt>
1076
  Get or set the <code>tolerance</code> option, after init.
1077
</dt>
1078
<dd>
1079
<pre><code>//getter
1080
var tolerance = $( ".selector" ).sortable( "option", "tolerance" );
1081
//setter
1082
$( ".selector" ).sortable( "option", "tolerance", 'pointer' );</code></pre>
1083
</dd>
1084

    
1085
    </dl>
1086
  </div>
1087
</li>
1088

    
1089

    
1090
<li class="option" id="option-zIndex">
1091
  <div class="option-header">
1092
    <h3 class="option-name"><a href="#option-zIndex">zIndex</a></h3>
1093
    <dl>
1094
      <dt class="option-type-label">Type:</dt>
1095
        <dd class="option-type">Integer</dd>
1096
      
1097
      <dt class="option-default-label">Default:</dt>
1098
        <dd class="option-default">1000</dd>
1099
      
1100
    </dl>
1101
  </div>
1102
  <div class="option-description">
1103
    <p>Z-index for element/helper while being sorted.</p>
1104
  </div>
1105
  <div class="option-examples">
1106
    <h4>Code examples</h4>
1107
    <dl class="option-examples-list">
1108
    
1109
<dt>
1110
  Initialize a sortable with the <code>zIndex</code> option specified.
1111
</dt>
1112
<dd>
1113
<pre><code>$( ".selector" ).sortable({ zIndex: 5 });</code></pre>
1114
</dd>
1115

    
1116
    
1117
<dt>
1118
  Get or set the <code>zIndex</code> option, after init.
1119
</dt>
1120
<dd>
1121
<pre><code>//getter
1122
var zIndex = $( ".selector" ).sortable( "option", "zIndex" );
1123
//setter
1124
$( ".selector" ).sortable( "option", "zIndex", 5 );</code></pre>
1125
</dd>
1126

    
1127
    </dl>
1128
  </div>
1129
</li>
1130

    
1131
    </ul>
1132
  </div>
1133
  <div id="events">
1134
    <h2 class="top-header">Events</h2>
1135
    <ul class="events-list">
1136
      
1137
<li class="event" id="event-start">
1138
  <div class="event-header">
1139
    <h3 class="event-name"><a href="#event-start">start</a></h3>
1140
    <dl>
1141
      <dt class="event-type-label">Type:</dt>
1142
        <dd class="event-type">sortstart</dd>
1143
    </dl>
1144
  </div>
1145
  <div class="event-description">
1146
    <p>This event is triggered when sorting starts.</p>
1147
  </div>
1148
  <div class="event-examples">
1149
    <h4>Code examples</h4>
1150
    <dl class="event-examples-list">
1151
    
1152
<dt>
1153
  Supply a callback function to handle the <code>start</code> event as an init option.
1154
</dt>
1155
<dd>
1156
<pre><code>$( &quot;.selector&quot; ).sortable({
1157
   start: function(event, ui) { ... }
1158
});</code></pre>
1159
</dd>
1160

    
1161
    
1162
<dt>
1163
  Bind to the <code>start</code> event by type: <code>sortstart</code>.
1164
</dt>
1165
<dd>
1166
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sortstart&quot;, function(event, ui) {
1167
  ...
1168
});</code></pre>
1169
</dd>
1170

    
1171
    </dl>
1172
  </div>
1173
</li>
1174

    
1175

    
1176
<li class="event" id="event-sort">
1177
  <div class="event-header">
1178
    <h3 class="event-name"><a href="#event-sort">sort</a></h3>
1179
    <dl>
1180
      <dt class="event-type-label">Type:</dt>
1181
        <dd class="event-type">sort</dd>
1182
    </dl>
1183
  </div>
1184
  <div class="event-description">
1185
    <p>This event is triggered during sorting.</p>
1186
  </div>
1187
  <div class="event-examples">
1188
    <h4>Code examples</h4>
1189
    <dl class="event-examples-list">
1190
    
1191
<dt>
1192
  Supply a callback function to handle the <code>sort</code> event as an init option.
1193
</dt>
1194
<dd>
1195
<pre><code>$( &quot;.selector&quot; ).sortable({
1196
   sort: function(event, ui) { ... }
1197
});</code></pre>
1198
</dd>
1199

    
1200
    
1201
<dt>
1202
  Bind to the <code>sort</code> event by type: <code>sort</code>.
1203
</dt>
1204
<dd>
1205
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sort&quot;, function(event, ui) {
1206
  ...
1207
});</code></pre>
1208
</dd>
1209

    
1210
    </dl>
1211
  </div>
1212
</li>
1213

    
1214

    
1215
<li class="event" id="event-change">
1216
  <div class="event-header">
1217
    <h3 class="event-name"><a href="#event-change">change</a></h3>
1218
    <dl>
1219
      <dt class="event-type-label">Type:</dt>
1220
        <dd class="event-type">sortchange</dd>
1221
    </dl>
1222
  </div>
1223
  <div class="event-description">
1224
    <p>This event is triggered during sorting, but only when the DOM position has changed.</p>
1225
  </div>
1226
  <div class="event-examples">
1227
    <h4>Code examples</h4>
1228
    <dl class="event-examples-list">
1229
    
1230
<dt>
1231
  Supply a callback function to handle the <code>change</code> event as an init option.
1232
</dt>
1233
<dd>
1234
<pre><code>$( &quot;.selector&quot; ).sortable({
1235
   change: function(event, ui) { ... }
1236
});</code></pre>
1237
</dd>
1238

    
1239
    
1240
<dt>
1241
  Bind to the <code>change</code> event by type: <code>sortchange</code>.
1242
</dt>
1243
<dd>
1244
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sortchange&quot;, function(event, ui) {
1245
  ...
1246
});</code></pre>
1247
</dd>
1248

    
1249
    </dl>
1250
  </div>
1251
</li>
1252

    
1253

    
1254
<li class="event" id="event-beforeStop">
1255
  <div class="event-header">
1256
    <h3 class="event-name"><a href="#event-beforeStop">beforeStop</a></h3>
1257
    <dl>
1258
      <dt class="event-type-label">Type:</dt>
1259
        <dd class="event-type">sortbeforestop</dd>
1260
    </dl>
1261
  </div>
1262
  <div class="event-description">
1263
    <p>This event is triggered when sorting stops, but when the placeholder/helper is still available.</p>
1264
  </div>
1265
  <div class="event-examples">
1266
    <h4>Code examples</h4>
1267
    <dl class="event-examples-list">
1268
    
1269
<dt>
1270
  Supply a callback function to handle the <code>beforeStop</code> event as an init option.
1271
</dt>
1272
<dd>
1273
<pre><code>$( &quot;.selector&quot; ).sortable({
1274
   beforeStop: function(event, ui) { ... }
1275
});</code></pre>
1276
</dd>
1277

    
1278
    
1279
<dt>
1280
  Bind to the <code>beforeStop</code> event by type: <code>sortbeforestop</code>.
1281
</dt>
1282
<dd>
1283
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sortbeforestop&quot;, function(event, ui) {
1284
  ...
1285
});</code></pre>
1286
</dd>
1287

    
1288
    </dl>
1289
  </div>
1290
</li>
1291

    
1292

    
1293
<li class="event" id="event-stop">
1294
  <div class="event-header">
1295
    <h3 class="event-name"><a href="#event-stop">stop</a></h3>
1296
    <dl>
1297
      <dt class="event-type-label">Type:</dt>
1298
        <dd class="event-type">sortstop</dd>
1299
    </dl>
1300
  </div>
1301
  <div class="event-description">
1302
    <p>This event is triggered when sorting has stopped.</p>
1303
  </div>
1304
  <div class="event-examples">
1305
    <h4>Code examples</h4>
1306
    <dl class="event-examples-list">
1307
    
1308
<dt>
1309
  Supply a callback function to handle the <code>stop</code> event as an init option.
1310
</dt>
1311
<dd>
1312
<pre><code>$( &quot;.selector&quot; ).sortable({
1313
   stop: function(event, ui) { ... }
1314
});</code></pre>
1315
</dd>
1316

    
1317
    
1318
<dt>
1319
  Bind to the <code>stop</code> event by type: <code>sortstop</code>.
1320
</dt>
1321
<dd>
1322
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sortstop&quot;, function(event, ui) {
1323
  ...
1324
});</code></pre>
1325
</dd>
1326

    
1327
    </dl>
1328
  </div>
1329
</li>
1330

    
1331

    
1332
<li class="event" id="event-update">
1333
  <div class="event-header">
1334
    <h3 class="event-name"><a href="#event-update">update</a></h3>
1335
    <dl>
1336
      <dt class="event-type-label">Type:</dt>
1337
        <dd class="event-type">sortupdate</dd>
1338
    </dl>
1339
  </div>
1340
  <div class="event-description">
1341
    <p>This event is triggered when the user stopped sorting and the DOM position has changed.</p>
1342
  </div>
1343
  <div class="event-examples">
1344
    <h4>Code examples</h4>
1345
    <dl class="event-examples-list">
1346
    
1347
<dt>
1348
  Supply a callback function to handle the <code>update</code> event as an init option.
1349
</dt>
1350
<dd>
1351
<pre><code>$( &quot;.selector&quot; ).sortable({
1352
   update: function(event, ui) { ... }
1353
});</code></pre>
1354
</dd>
1355

    
1356
    
1357
<dt>
1358
  Bind to the <code>update</code> event by type: <code>sortupdate</code>.
1359
</dt>
1360
<dd>
1361
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sortupdate&quot;, function(event, ui) {
1362
  ...
1363
});</code></pre>
1364
</dd>
1365

    
1366
    </dl>
1367
  </div>
1368
</li>
1369

    
1370

    
1371
<li class="event" id="event-receive">
1372
  <div class="event-header">
1373
    <h3 class="event-name"><a href="#event-receive">receive</a></h3>
1374
    <dl>
1375
      <dt class="event-type-label">Type:</dt>
1376
        <dd class="event-type">sortreceive</dd>
1377
    </dl>
1378
  </div>
1379
  <div class="event-description">
1380
    <p>This event is triggered when a connected sortable list has received an item from another list.</p>
1381
  </div>
1382
  <div class="event-examples">
1383
    <h4>Code examples</h4>
1384
    <dl class="event-examples-list">
1385
    
1386
<dt>
1387
  Supply a callback function to handle the <code>receive</code> event as an init option.
1388
</dt>
1389
<dd>
1390
<pre><code>$( &quot;.selector&quot; ).sortable({
1391
   receive: function(event, ui) { ... }
1392
});</code></pre>
1393
</dd>
1394

    
1395
    
1396
<dt>
1397
  Bind to the <code>receive</code> event by type: <code>sortreceive</code>.
1398
</dt>
1399
<dd>
1400
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sortreceive&quot;, function(event, ui) {
1401
  ...
1402
});</code></pre>
1403
</dd>
1404

    
1405
    </dl>
1406
  </div>
1407
</li>
1408

    
1409

    
1410
<li class="event" id="event-remove">
1411
  <div class="event-header">
1412
    <h3 class="event-name"><a href="#event-remove">remove</a></h3>
1413
    <dl>
1414
      <dt class="event-type-label">Type:</dt>
1415
        <dd class="event-type">sortremove</dd>
1416
    </dl>
1417
  </div>
1418
  <div class="event-description">
1419
    <p>This event is triggered when a sortable item has been dragged out from the list and into another.</p>
1420
  </div>
1421
  <div class="event-examples">
1422
    <h4>Code examples</h4>
1423
    <dl class="event-examples-list">
1424
    
1425
<dt>
1426
  Supply a callback function to handle the <code>remove</code> event as an init option.
1427
</dt>
1428
<dd>
1429
<pre><code>$( &quot;.selector&quot; ).sortable({
1430
   remove: function(event, ui) { ... }
1431
});</code></pre>
1432
</dd>
1433

    
1434
    
1435
<dt>
1436
  Bind to the <code>remove</code> event by type: <code>sortremove</code>.
1437
</dt>
1438
<dd>
1439
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sortremove&quot;, function(event, ui) {
1440
  ...
1441
});</code></pre>
1442
</dd>
1443

    
1444
    </dl>
1445
  </div>
1446
</li>
1447

    
1448

    
1449
<li class="event" id="event-over">
1450
  <div class="event-header">
1451
    <h3 class="event-name"><a href="#event-over">over</a></h3>
1452
    <dl>
1453
      <dt class="event-type-label">Type:</dt>
1454
        <dd class="event-type">sortover</dd>
1455
    </dl>
1456
  </div>
1457
  <div class="event-description">
1458
    <p>This event is triggered when a sortable item is moved into a connected list.</p>
1459
  </div>
1460
  <div class="event-examples">
1461
    <h4>Code examples</h4>
1462
    <dl class="event-examples-list">
1463
    
1464
<dt>
1465
  Supply a callback function to handle the <code>over</code> event as an init option.
1466
</dt>
1467
<dd>
1468
<pre><code>$( &quot;.selector&quot; ).sortable({
1469
   over: function(event, ui) { ... }
1470
});</code></pre>
1471
</dd>
1472

    
1473
    
1474
<dt>
1475
  Bind to the <code>over</code> event by type: <code>sortover</code>.
1476
</dt>
1477
<dd>
1478
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sortover&quot;, function(event, ui) {
1479
  ...
1480
});</code></pre>
1481
</dd>
1482

    
1483
    </dl>
1484
  </div>
1485
</li>
1486

    
1487

    
1488
<li class="event" id="event-out">
1489
  <div class="event-header">
1490
    <h3 class="event-name"><a href="#event-out">out</a></h3>
1491
    <dl>
1492
      <dt class="event-type-label">Type:</dt>
1493
        <dd class="event-type">sortout</dd>
1494
    </dl>
1495
  </div>
1496
  <div class="event-description">
1497
    <p>This event is triggered when a sortable item is moved away from a connected list.</p>
1498
  </div>
1499
  <div class="event-examples">
1500
    <h4>Code examples</h4>
1501
    <dl class="event-examples-list">
1502
    
1503
<dt>
1504
  Supply a callback function to handle the <code>out</code> event as an init option.
1505
</dt>
1506
<dd>
1507
<pre><code>$( &quot;.selector&quot; ).sortable({
1508
   out: function(event, ui) { ... }
1509
});</code></pre>
1510
</dd>
1511

    
1512
    
1513
<dt>
1514
  Bind to the <code>out</code> event by type: <code>sortout</code>.
1515
</dt>
1516
<dd>
1517
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sortout&quot;, function(event, ui) {
1518
  ...
1519
});</code></pre>
1520
</dd>
1521

    
1522
    </dl>
1523
  </div>
1524
</li>
1525

    
1526

    
1527
<li class="event" id="event-activate">
1528
  <div class="event-header">
1529
    <h3 class="event-name"><a href="#event-activate">activate</a></h3>
1530
    <dl>
1531
      <dt class="event-type-label">Type:</dt>
1532
        <dd class="event-type">sortactivate</dd>
1533
    </dl>
1534
  </div>
1535
  <div class="event-description">
1536
    <p>This event is triggered when using connected lists, every connected list on drag start receives it.</p>
1537
  </div>
1538
  <div class="event-examples">
1539
    <h4>Code examples</h4>
1540
    <dl class="event-examples-list">
1541
    
1542
<dt>
1543
  Supply a callback function to handle the <code>activate</code> event as an init option.
1544
</dt>
1545
<dd>
1546
<pre><code>$( &quot;.selector&quot; ).sortable({
1547
   activate: function(event, ui) { ... }
1548
});</code></pre>
1549
</dd>
1550

    
1551
    
1552
<dt>
1553
  Bind to the <code>activate</code> event by type: <code>sortactivate</code>.
1554
</dt>
1555
<dd>
1556
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sortactivate&quot;, function(event, ui) {
1557
  ...
1558
});</code></pre>
1559
</dd>
1560

    
1561
    </dl>
1562
  </div>
1563
</li>
1564

    
1565

    
1566
<li class="event" id="event-deactivate">
1567
  <div class="event-header">
1568
    <h3 class="event-name"><a href="#event-deactivate">deactivate</a></h3>
1569
    <dl>
1570
      <dt class="event-type-label">Type:</dt>
1571
        <dd class="event-type">sortdeactivate</dd>
1572
    </dl>
1573
  </div>
1574
  <div class="event-description">
1575
    <p>This event is triggered when sorting was stopped, is propagated to all possible connected lists.</p>
1576
  </div>
1577
  <div class="event-examples">
1578
    <h4>Code examples</h4>
1579
    <dl class="event-examples-list">
1580
    
1581
<dt>
1582
  Supply a callback function to handle the <code>deactivate</code> event as an init option.
1583
</dt>
1584
<dd>
1585
<pre><code>$( &quot;.selector&quot; ).sortable({
1586
   deactivate: function(event, ui) { ... }
1587
});</code></pre>
1588
</dd>
1589

    
1590
    
1591
<dt>
1592
  Bind to the <code>deactivate</code> event by type: <code>sortdeactivate</code>.
1593
</dt>
1594
<dd>
1595
<pre><code>$( &quot;.selector&quot; ).bind( &quot;sortdeactivate&quot;, function(event, ui) {
1596
  ...
1597
});</code></pre>
1598
</dd>
1599

    
1600
    </dl>
1601
  </div>
1602
</li>
1603

    
1604
    </ul>
1605
  </div>
1606
  <div id="methods">
1607
    <h2 class="top-header">Methods</h2>
1608
    <ul class="methods-list">
1609
      
1610
<li class="method" id="method-destroy">
1611
  <div class="method-header">
1612
    <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
1613
    <dl>
1614
      <dt class="method-signature-label">Signature:</dt>
1615
        <dd class="method-signature">.sortable( "destroy"
1616

    
1617

    
1618

    
1619

    
1620

    
1621

    
1622

    
1623
)</dd>
1624
    </dl>
1625
  </div>
1626
  <div class="method-description">
1627
    <p>Remove the sortable functionality completely. This will return the element back to its pre-init state.</p>
1628
  </div>
1629
</li>
1630

    
1631

    
1632
<li class="method" id="method-disable">
1633
  <div class="method-header">
1634
    <h3 class="method-name"><a href="#method-disable">disable</a></h3>
1635
    <dl>
1636
      <dt class="method-signature-label">Signature:</dt>
1637
        <dd class="method-signature">.sortable( "disable"
1638

    
1639

    
1640

    
1641

    
1642

    
1643

    
1644

    
1645
)</dd>
1646
    </dl>
1647
  </div>
1648
  <div class="method-description">
1649
    <p>Disable the sortable.</p>
1650
  </div>
1651
</li>
1652

    
1653

    
1654
<li class="method" id="method-enable">
1655
  <div class="method-header">
1656
    <h3 class="method-name"><a href="#method-enable">enable</a></h3>
1657
    <dl>
1658
      <dt class="method-signature-label">Signature:</dt>
1659
        <dd class="method-signature">.sortable( "enable"
1660

    
1661

    
1662

    
1663

    
1664

    
1665

    
1666

    
1667
)</dd>
1668
    </dl>
1669
  </div>
1670
  <div class="method-description">
1671
    <p>Enable the sortable.</p>
1672
  </div>
1673
</li>
1674

    
1675

    
1676
<li class="method" id="method-option">
1677
  <div class="method-header">
1678
    <h3 class="method-name"><a href="#method-option">option</a></h3>
1679
    <dl>
1680
      <dt class="method-signature-label">Signature:</dt>
1681
        <dd class="method-signature">.sortable( "option"
1682

    
1683
, optionName
1684

    
1685
, <span class="optional">[</span>value<span class="optional">] </span>
1686

    
1687

    
1688

    
1689
)</dd>
1690
    </dl>
1691
  </div>
1692
  <div class="method-description">
1693
    <p>Get or set any sortable option. If no value is specified, will act as a getter.</p>
1694
  </div>
1695
</li>
1696

    
1697

    
1698
<li class="method" id="method-option">
1699
  <div class="method-header">
1700
    <h3 class="method-name"><a href="#method-option">option</a></h3>
1701
    <dl>
1702
      <dt class="method-signature-label">Signature:</dt>
1703
        <dd class="method-signature">.sortable( "option"
1704

    
1705
, options
1706

    
1707

    
1708

    
1709

    
1710

    
1711
)</dd>
1712
    </dl>
1713
  </div>
1714
  <div class="method-description">
1715
    <p>Set multiple sortable options at once by providing an options object.</p>
1716
  </div>
1717
</li>
1718

    
1719

    
1720
<li class="method" id="method-widget">
1721
  <div class="method-header">
1722
    <h3 class="method-name"><a href="#method-widget">widget</a></h3>
1723
    <dl>
1724
      <dt class="method-signature-label">Signature:</dt>
1725
        <dd class="method-signature">.sortable( "widget"
1726

    
1727

    
1728

    
1729

    
1730

    
1731

    
1732

    
1733
)</dd>
1734
    </dl>
1735
  </div>
1736
  <div class="method-description">
1737
    <p>Returns the .ui-sortable element.</p>
1738
  </div>
1739
</li>
1740

    
1741

    
1742
<li class="method" id="method-serialize">
1743
  <div class="method-header">
1744
    <h3 class="method-name"><a href="#method-serialize">serialize</a></h3>
1745
    <dl>
1746
      <dt class="method-signature-label">Signature:</dt>
1747
        <dd class="method-signature">.sortable( "serialize"
1748

    
1749
, <span class="optional">[</span>options<span class="optional">] </span>
1750

    
1751

    
1752

    
1753

    
1754

    
1755
)</dd>
1756
    </dl>
1757
  </div>
1758
  <div class="method-description">
1759
    <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.
1760
</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".
1761
</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).
1762
</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>
1763
  </div>
1764
</li>
1765

    
1766

    
1767
<li class="method" id="method-toArray">
1768
  <div class="method-header">
1769
    <h3 class="method-name"><a href="#method-toArray">toArray</a></h3>
1770
    <dl>
1771
      <dt class="method-signature-label">Signature:</dt>
1772
        <dd class="method-signature">.sortable( "toArray"
1773

    
1774

    
1775

    
1776

    
1777

    
1778

    
1779

    
1780
)</dd>
1781
    </dl>
1782
  </div>
1783
  <div class="method-description">
1784
    <p>Serializes the sortable's item id's into an array of string. If you have
1785
</p>
1786
<pre>
1787
&lt;ul id=&quot;a_sortable&quot;&gt;&lt;br&gt;
1788
&lt;li id=&quot;hello&quot;&gt;Hello&lt;/li&gt;&lt;br&gt;
1789
&lt;li id=&quot;goodbye&quot;&gt;Good bye&lt;/li&gt;&lt;br&gt;
1790
&lt;/ul&gt;
1791
</pre>
1792
<p>and do
1793
</p>
1794
<pre>var result = $('#a_sortable').sortable('toArray');</pre>
1795
<p>then
1796
</p>
1797
<pre>result[0] will contain &quot;hello&quot; and result[1] will contain &quot;goodbye&quot;.</pre></p>
1798
  </div>
1799
</li>
1800

    
1801
<p>
1802
<li class="method" id="method-refresh">
1803
  <div class="method-header">
1804
    <h3 class="method-name"><a href="#method-refresh">refresh</a></h3>
1805
    <dl>
1806
      <dt class="method-signature-label">Signature:</dt>
1807
        <dd class="method-signature">.sortable( "refresh"
1808

    
1809

    
1810

    
1811

    
1812

    
1813

    
1814

    
1815
)</dd>
1816
    </dl>
1817
  </div>
1818
  <div class="method-description">
1819
    <p>Refresh the sortable items. Custom trigger the reloading of all sortable items, causing new items to be recognized.</p>
1820
  </div>
1821
</li>
1822

    
1823

    
1824
<li class="method" id="method-refreshPositions">
1825
  <div class="method-header">
1826
    <h3 class="method-name"><a href="#method-refreshPositions">refreshPositions</a></h3>
1827
    <dl>
1828
      <dt class="method-signature-label">Signature:</dt>
1829
        <dd class="method-signature">.sortable( "refreshPositions"
1830

    
1831

    
1832

    
1833

    
1834

    
1835

    
1836

    
1837
)</dd>
1838
    </dl>
1839
  </div>
1840
  <div class="method-description">
1841
    <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>
1842
  </div>
1843
</li>
1844

    
1845

    
1846
<li class="method" id="method-cancel">
1847
  <div class="method-header">
1848
    <h3 class="method-name"><a href="#method-cancel">cancel</a></h3>
1849
    <dl>
1850
      <dt class="method-signature-label">Signature:</dt>
1851
        <dd class="method-signature">.sortable( "cancel"
1852

    
1853

    
1854

    
1855

    
1856

    
1857

    
1858

    
1859
)</dd>
1860
    </dl>
1861
  </div>
1862
  <div class="method-description">
1863
    <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.
1864
</p><p>If the sortable item is not being moved from one connected sortable to another:
1865
</p>
1866
<pre>$(this).sortable('cancel');</pre>
1867
<p>will cancel the change.
1868
</p><p>If the sortable item is being moved from one connected sortable to another:
1869
</p>
1870
<pre>$(ui.sender).sortable('cancel');</pre>
1871
<p>will cancel the change. Useful in the 'receive' callback.</p>
1872
  </div>
1873
</li>
1874

    
1875
    </ul>
1876
  </div>
1877
  <div id="theming">
1878
    <h2 class="top-header">Theming</h2>
1879
    <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.
1880
</p>
1881
  <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.
1882
</p>
1883
    
1884
  <h3>Sample markup with jQuery UI CSS Framework classes</h3>
1885
  &lt;ul class=&quot;<strong>ui-sortable</strong>&quot;&gt;<br />
1886
&#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
1887
&#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
1888
&#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
1889
&lt;/ul&gt;
1890
  <p class="theme-note">
1891
    <strong>
1892
      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 />
1893
&#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
1894
&#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
1895
&#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
1896
&lt;/ul&gt;.
1897
    </strong>
1898
  </p>
1899

    
1900
  </div>
1901
</div>
1902

    
1903
</p><!-- 
1904
Pre-expand include size: 73516 bytes
1905
Post-expand include size: 127836 bytes
1906
Template argument size: 72364 bytes
1907
Maximum: 2097152 bytes
1908
-->
1909

    
1910
<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3772-1!1!0!!en!2 and timestamp 20101024200740 -->
(19-19/23)