Subversion Repositories Sites.obs-saisons.fr

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
40 aurelien 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 20100910172903 -->