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 Draggable</h1>
11
  <div id="overview">
12
    <h2 class="top-header">Overview</h2>
13
    <div id="overview-main">
14
        <p>The jQuery UI Draggable plugin makes selected elements draggable by mouse.</p>
15
<p>Draggable elements gets a class of <code>ui-draggable</code>. During drag the element also gets a class of <code>ui-draggable-dragging</code>. If you want not just drag, but drag-and-drop, see the jQuery UI Droppable plugin, which provides a drop target for draggables.</p>
16
<p>All callbacks (start, stop, drag) 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>
17
<ul>
18
<li><b>ui.helper</b> - the jQuery object representing the helper that's being dragged</li>
19
<li><b>ui.position</b> - current position of the helper as { top, left } object, relative to the offset element</li>
20
<li><b>ui.offset</b> - current absolute position of the helper as { top, left } object, relative to page</li>
21
</ul>
22
<p><br />
23
</p>
24
<p>To manipulate the position of a draggable during drag, you can either <a href="http://jsbin.com/etako/edit" class="external text" title="http://jsbin.com/etako/edit">use a wrapper as the draggable helper</a> and position the wrapped element with absolute positioning, or  you can correct internal values like so: <code>$(this).data('draggable').offset.click.top -= x</code>.</p>
25
    </div>
26
    <div id="overview-dependencies">
27
        <h3>Dependencies</h3>
28
        <ul>
29
<li>UI Core</li>
30
</ul>
31
    </div>
32
    <div id="overview-example">
33
        <h3>Example</h3>
34
        <div id="overview-example" class="example">
35
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
36
<p><div id="demo" class="tabs-container" rel="170">
37
Initialize a draggable with default options.<br />
38
</p>
39
<pre>$(&quot;#draggable&quot;).draggable();
40
</pre>
41
<p></div><div id="source" class="tabs-container">
42
</p>
43
<pre>&lt;!DOCTYPE html&gt;
44
&lt;html&gt;
45
&lt;head&gt;
46
  &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;
47
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&quot;&gt;&lt;/script&gt;
48
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
49
  &lt;style type=&quot;text/css&quot;&gt;
50
    #draggable { width: 100px; height: 70px; background: silver; }
51
  &lt;/style&gt;
52
  &lt;script&gt;
53
  $(document).ready(function() {
54
    $(&quot;#draggable&quot;).draggable();
55
  });
56
  &lt;/script&gt;
57
&lt;/head&gt;
58
&lt;body style="font-size:62.5%;"&gt;
59
 
60
&lt;div id=&quot;draggable&quot;&gt;Drag me&lt;/div&gt;
61
 
62
&lt;/body&gt;
63
&lt;/html&gt;
64
</pre>
65
<p></div>
66
</p><p></div>
67
    </div>
68
  </div>
69
  <div id="options">
70
    <h2 class="top-header">Options</h2>
71
    <ul class="options-list">
72
 
73
<li class="option" id="option-disabled">
74
  <div class="option-header">
75
    <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
76
    <dl>
77
      <dt class="option-type-label">Type:</dt>
78
        <dd class="option-type">Boolean</dd>
79
 
80
      <dt class="option-default-label">Default:</dt>
81
        <dd class="option-default">false</dd>
82
 
83
    </dl>
84
  </div>
85
  <div class="option-description">
86
    <p>Disables (true) or enables (false) the draggable. Can be set when initialising (first creating) the draggable.</p>
87
  </div>
88
  <div class="option-examples">
89
    <h4>Code examples</h4>
90
    <dl class="option-examples-list">
91
 
92
<dt>
93
  Initialize a draggable with the <code>disabled</code> option specified.
94
</dt>
95
<dd>
96
<pre><code>$( ".selector" ).draggable({ disabled: true });</code></pre>
97
</dd>
98
 
99
 
100
<dt>
101
  Get or set the <code>disabled</code> option, after init.
102
</dt>
103
<dd>
104
<pre><code>//getter
105
var disabled = $( ".selector" ).draggable( "option", "disabled" );
106
//setter
107
$( ".selector" ).draggable( "option", "disabled", true );</code></pre>
108
</dd>
109
 
110
    </dl>
111
  </div>
112
</li>
113
 
114
 
115
<li class="option" id="option-addClasses">
116
  <div class="option-header">
117
    <h3 class="option-name"><a href="#option-addClasses">addClasses</a></h3>
118
    <dl>
119
      <dt class="option-type-label">Type:</dt>
120
        <dd class="option-type">Boolean</dd>
121
 
122
      <dt class="option-default-label">Default:</dt>
123
        <dd class="option-default">true</dd>
124
 
125
    </dl>
126
  </div>
127
  <div class="option-description">
128
    <p>If set to false, will prevent the <code>ui-draggable</code> class from being added. This may be desired as a performance optimization when calling <code>.draggable()</code> init on many hundreds of elements.</p>
129
  </div>
130
  <div class="option-examples">
131
    <h4>Code examples</h4>
132
    <dl class="option-examples-list">
133
 
134
<dt>
135
  Initialize a draggable with the <code>addClasses</code> option specified.
136
</dt>
137
<dd>
138
<pre><code>$( ".selector" ).draggable({ addClasses: false });</code></pre>
139
</dd>
140
 
141
 
142
<dt>
143
  Get or set the <code>addClasses</code> option, after init.
144
</dt>
145
<dd>
146
<pre><code>//getter
147
var addClasses = $( ".selector" ).draggable( "option", "addClasses" );
148
//setter
149
$( ".selector" ).draggable( "option", "addClasses", false );</code></pre>
150
</dd>
151
 
152
    </dl>
153
  </div>
154
</li>
155
 
156
 
157
<li class="option" id="option-appendTo">
158
  <div class="option-header">
159
    <h3 class="option-name"><a href="#option-appendTo">appendTo</a></h3>
160
    <dl>
161
      <dt class="option-type-label">Type:</dt>
162
        <dd class="option-type">Element, Selector</dd>
163
 
164
      <dt class="option-default-label">Default:</dt>
165
        <dd class="option-default">'parent'</dd>
166
 
167
    </dl>
168
  </div>
169
  <div class="option-description">
170
    <p>The element passed to or selected by the <code>appendTo</code> option will be used as the draggable helper's container during dragging. By default, the helper is appended to the same container as the draggable.</p>
171
  </div>
172
  <div class="option-examples">
173
    <h4>Code examples</h4>
174
    <dl class="option-examples-list">
175
 
176
<dt>
177
  Initialize a draggable with the <code>appendTo</code> option specified.
178
</dt>
179
<dd>
180
<pre><code>$( ".selector" ).draggable({ appendTo: 'body' });</code></pre>
181
</dd>
182
 
183
 
184
<dt>
185
  Get or set the <code>appendTo</code> option, after init.
186
</dt>
187
<dd>
188
<pre><code>//getter
189
var appendTo = $( ".selector" ).draggable( "option", "appendTo" );
190
//setter
191
$( ".selector" ).draggable( "option", "appendTo", 'body' );</code></pre>
192
</dd>
193
 
194
    </dl>
195
  </div>
196
</li>
197
 
198
 
199
<li class="option" id="option-axis">
200
  <div class="option-header">
201
    <h3 class="option-name"><a href="#option-axis">axis</a></h3>
202
    <dl>
203
      <dt class="option-type-label">Type:</dt>
204
        <dd class="option-type">String</dd>
205
 
206
      <dt class="option-default-label">Default:</dt>
207
        <dd class="option-default">false</dd>
208
 
209
    </dl>
210
  </div>
211
  <div class="option-description">
212
    <p>Constrains dragging to either the horizontal (x) or vertical (y) axis. Possible values: 'x', 'y'.</p>
213
  </div>
214
  <div class="option-examples">
215
    <h4>Code examples</h4>
216
    <dl class="option-examples-list">
217
 
218
<dt>
219
  Initialize a draggable with the <code>axis</code> option specified.
220
</dt>
221
<dd>
222
<pre><code>$( ".selector" ).draggable({ axis: 'x' });</code></pre>
223
</dd>
224
 
225
 
226
<dt>
227
  Get or set the <code>axis</code> option, after init.
228
</dt>
229
<dd>
230
<pre><code>//getter
231
var axis = $( ".selector" ).draggable( "option", "axis" );
232
//setter
233
$( ".selector" ).draggable( "option", "axis", 'x' );</code></pre>
234
</dd>
235
 
236
    </dl>
237
  </div>
238
</li>
239
 
240
 
241
<li class="option" id="option-cancel">
242
  <div class="option-header">
243
    <h3 class="option-name"><a href="#option-cancel">cancel</a></h3>
244
    <dl>
245
      <dt class="option-type-label">Type:</dt>
246
        <dd class="option-type">Selector</dd>
247
 
248
      <dt class="option-default-label">Default:</dt>
249
        <dd class="option-default">':input,option'</dd>
250
 
251
    </dl>
252
  </div>
253
  <div class="option-description">
254
    <p>Prevents dragging from starting on specified elements.</p>
255
  </div>
256
  <div class="option-examples">
257
    <h4>Code examples</h4>
258
    <dl class="option-examples-list">
259
 
260
<dt>
261
  Initialize a draggable with the <code>cancel</code> option specified.
262
</dt>
263
<dd>
264
<pre><code>$( ".selector" ).draggable({ cancel: 'button' });</code></pre>
265
</dd>
266
 
267
 
268
<dt>
269
  Get or set the <code>cancel</code> option, after init.
270
</dt>
271
<dd>
272
<pre><code>//getter
273
var cancel = $( ".selector" ).draggable( "option", "cancel" );
274
//setter
275
$( ".selector" ).draggable( "option", "cancel", 'button' );</code></pre>
276
</dd>
277
 
278
    </dl>
279
  </div>
280
</li>
281
 
282
 
283
<li class="option" id="option-connectToSortable">
284
  <div class="option-header">
285
    <h3 class="option-name"><a href="#option-connectToSortable">connectToSortable</a></h3>
286
    <dl>
287
      <dt class="option-type-label">Type:</dt>
288
        <dd class="option-type">Selector</dd>
289
 
290
      <dt class="option-default-label">Default:</dt>
291
        <dd class="option-default">false</dd>
292
 
293
    </dl>
294
  </div>
295
  <div class="option-description">
296
    <p>Allows the draggable to be dropped onto the specified sortables. If this option is used (<code>helper</code> must be set to 'clone' in order to work flawlessly), a draggable can be dropped onto a sortable list and then becomes part of it.
297
</p><p>Note: Specifying this option as an array of selectors has been removed.</p>
298
  </div>
299
  <div class="option-examples">
300
    <h4>Code examples</h4>
301
    <dl class="option-examples-list">
302
 
303
<dt>
304
  Initialize a draggable with the <code>connectToSortable</code> option specified.
305
</dt>
306
<dd>
307
<pre><code>$( ".selector" ).draggable({ connectToSortable: 'ul#myList' });</code></pre>
308
</dd>
309
 
310
 
311
<dt>
312
  Get or set the <code>connectToSortable</code> option, after init.
313
</dt>
314
<dd>
315
<pre><code>//getter
316
var connectToSortable = $( ".selector" ).draggable( "option", "connectToSortable" );
317
//setter
318
$( ".selector" ).draggable( "option", "connectToSortable", 'ul#myList' );</code></pre>
319
</dd>
320
 
321
    </dl>
322
  </div>
323
</li>
324
 
325
 
326
<li class="option" id="option-containment">
327
  <div class="option-header">
328
    <h3 class="option-name"><a href="#option-containment">containment</a></h3>
329
    <dl>
330
      <dt class="option-type-label">Type:</dt>
331
        <dd class="option-type">Selector, Element, String, Array</dd>
332
 
333
      <dt class="option-default-label">Default:</dt>
334
        <dd class="option-default">false</dd>
335
 
336
    </dl>
337
  </div>
338
  <div class="option-description">
339
    <p>Constrains dragging to within the bounds of the specified element or region. Possible string values: 'parent', 'document', 'window', [x1, y1, x2, y2].</p>
340
  </div>
341
  <div class="option-examples">
342
    <h4>Code examples</h4>
343
    <dl class="option-examples-list">
344
 
345
<dt>
346
  Initialize a draggable with the <code>containment</code> option specified.
347
</dt>
348
<dd>
349
<pre><code>$( ".selector" ).draggable({ containment: 'parent' });</code></pre>
350
</dd>
351
 
352
 
353
<dt>
354
  Get or set the <code>containment</code> option, after init.
355
</dt>
356
<dd>
357
<pre><code>//getter
358
var containment = $( ".selector" ).draggable( "option", "containment" );
359
//setter
360
$( ".selector" ).draggable( "option", "containment", 'parent' );</code></pre>
361
</dd>
362
 
363
    </dl>
364
  </div>
365
</li>
366
 
367
 
368
<li class="option" id="option-cursor">
369
  <div class="option-header">
370
    <h3 class="option-name"><a href="#option-cursor">cursor</a></h3>
371
    <dl>
372
      <dt class="option-type-label">Type:</dt>
373
        <dd class="option-type">String</dd>
374
 
375
      <dt class="option-default-label">Default:</dt>
376
        <dd class="option-default">'auto'</dd>
377
 
378
    </dl>
379
  </div>
380
  <div class="option-description">
381
    <p>The css cursor during the drag operation.</p>
382
  </div>
383
  <div class="option-examples">
384
    <h4>Code examples</h4>
385
    <dl class="option-examples-list">
386
 
387
<dt>
388
  Initialize a draggable with the <code>cursor</code> option specified.
389
</dt>
390
<dd>
391
<pre><code>$( ".selector" ).draggable({ cursor: 'crosshair' });</code></pre>
392
</dd>
393
 
394
 
395
<dt>
396
  Get or set the <code>cursor</code> option, after init.
397
</dt>
398
<dd>
399
<pre><code>//getter
400
var cursor = $( ".selector" ).draggable( "option", "cursor" );
401
//setter
402
$( ".selector" ).draggable( "option", "cursor", 'crosshair' );</code></pre>
403
</dd>
404
 
405
    </dl>
406
  </div>
407
</li>
408
 
409
 
410
<li class="option" id="option-cursorAt">
411
  <div class="option-header">
412
    <h3 class="option-name"><a href="#option-cursorAt">cursorAt</a></h3>
413
    <dl>
414
      <dt class="option-type-label">Type:</dt>
415
        <dd class="option-type">Object</dd>
416
 
417
      <dt class="option-default-label">Default:</dt>
418
        <dd class="option-default">false</dd>
419
 
420
    </dl>
421
  </div>
422
  <div class="option-description">
423
    <p>Moves the dragging 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>
424
  </div>
425
  <div class="option-examples">
426
    <h4>Code examples</h4>
427
    <dl class="option-examples-list">
428
 
429
<dt>
430
  Initialize a draggable with the <code>cursorAt</code> option specified.
431
</dt>
432
<dd>
433
<pre><code>$( ".selector" ).draggable({ cursorAt: { left: 5 } });</code></pre>
434
</dd>
435
 
436
 
437
<dt>
438
  Get or set the <code>cursorAt</code> option, after init.
439
</dt>
440
<dd>
441
<pre><code>//getter
442
var cursorAt = $( ".selector" ).draggable( "option", "cursorAt" );
443
//setter
444
$( ".selector" ).draggable( "option", "cursorAt", { left: 5 } );</code></pre>
445
</dd>
446
 
447
    </dl>
448
  </div>
449
</li>
450
 
451
 
452
<li class="option" id="option-delay">
453
  <div class="option-header">
454
    <h3 class="option-name"><a href="#option-delay">delay</a></h3>
455
    <dl>
456
      <dt class="option-type-label">Type:</dt>
457
        <dd class="option-type">Integer</dd>
458
 
459
      <dt class="option-default-label">Default:</dt>
460
        <dd class="option-default">0</dd>
461
 
462
    </dl>
463
  </div>
464
  <div class="option-description">
465
    <p>Time in milliseconds after mousedown until dragging should start. This option can be used to prevent unwanted drags when clicking on an element.</p>
466
  </div>
467
  <div class="option-examples">
468
    <h4>Code examples</h4>
469
    <dl class="option-examples-list">
470
 
471
<dt>
472
  Initialize a draggable with the <code>delay</code> option specified.
473
</dt>
474
<dd>
475
<pre><code>$( ".selector" ).draggable({ delay: 500 });</code></pre>
476
</dd>
477
 
478
 
479
<dt>
480
  Get or set the <code>delay</code> option, after init.
481
</dt>
482
<dd>
483
<pre><code>//getter
484
var delay = $( ".selector" ).draggable( "option", "delay" );
485
//setter
486
$( ".selector" ).draggable( "option", "delay", 500 );</code></pre>
487
</dd>
488
 
489
    </dl>
490
  </div>
491
</li>
492
 
493
 
494
<li class="option" id="option-distance">
495
  <div class="option-header">
496
    <h3 class="option-name"><a href="#option-distance">distance</a></h3>
497
    <dl>
498
      <dt class="option-type-label">Type:</dt>
499
        <dd class="option-type">Integer</dd>
500
 
501
      <dt class="option-default-label">Default:</dt>
502
        <dd class="option-default">1</dd>
503
 
504
    </dl>
505
  </div>
506
  <div class="option-description">
507
    <p>Distance in pixels after mousedown the mouse must move before dragging should start. This option can be used to prevent unwanted drags when clicking on an element.</p>
508
  </div>
509
  <div class="option-examples">
510
    <h4>Code examples</h4>
511
    <dl class="option-examples-list">
512
 
513
<dt>
514
  Initialize a draggable with the <code>distance</code> option specified.
515
</dt>
516
<dd>
517
<pre><code>$( ".selector" ).draggable({ distance: 30 });</code></pre>
518
</dd>
519
 
520
 
521
<dt>
522
  Get or set the <code>distance</code> option, after init.
523
</dt>
524
<dd>
525
<pre><code>//getter
526
var distance = $( ".selector" ).draggable( "option", "distance" );
527
//setter
528
$( ".selector" ).draggable( "option", "distance", 30 );</code></pre>
529
</dd>
530
 
531
    </dl>
532
  </div>
533
</li>
534
 
535
 
536
<li class="option" id="option-grid">
537
  <div class="option-header">
538
    <h3 class="option-name"><a href="#option-grid">grid</a></h3>
539
    <dl>
540
      <dt class="option-type-label">Type:</dt>
541
        <dd class="option-type">Array</dd>
542
 
543
      <dt class="option-default-label">Default:</dt>
544
        <dd class="option-default">false</dd>
545
 
546
    </dl>
547
  </div>
548
  <div class="option-description">
549
    <p>Snaps the dragging helper to a grid, every x and y pixels. Array values: [x, y]</p>
550
  </div>
551
  <div class="option-examples">
552
    <h4>Code examples</h4>
553
    <dl class="option-examples-list">
554
 
555
<dt>
556
  Initialize a draggable with the <code>grid</code> option specified.
557
</dt>
558
<dd>
559
<pre><code>$( ".selector" ).draggable({ grid: [50, 20] });</code></pre>
560
</dd>
561
 
562
 
563
<dt>
564
  Get or set the <code>grid</code> option, after init.
565
</dt>
566
<dd>
567
<pre><code>//getter
568
var grid = $( ".selector" ).draggable( "option", "grid" );
569
//setter
570
$( ".selector" ).draggable( "option", "grid", [50, 20] );</code></pre>
571
</dd>
572
 
573
    </dl>
574
  </div>
575
</li>
576
 
577
 
578
<li class="option" id="option-handle">
579
  <div class="option-header">
580
    <h3 class="option-name"><a href="#option-handle">handle</a></h3>
581
    <dl>
582
      <dt class="option-type-label">Type:</dt>
583
        <dd class="option-type">Element, Selector</dd>
584
 
585
      <dt class="option-default-label">Default:</dt>
586
        <dd class="option-default">false</dd>
587
 
588
    </dl>
589
  </div>
590
  <div class="option-description">
591
    <p>If specified, restricts drag start click to the specified element(s).</p>
592
  </div>
593
  <div class="option-examples">
594
    <h4>Code examples</h4>
595
    <dl class="option-examples-list">
596
 
597
<dt>
598
  Initialize a draggable with the <code>handle</code> option specified.
599
</dt>
600
<dd>
601
<pre><code>$( ".selector" ).draggable({ handle: 'h2' });</code></pre>
602
</dd>
603
 
604
 
605
<dt>
606
  Get or set the <code>handle</code> option, after init.
607
</dt>
608
<dd>
609
<pre><code>//getter
610
var handle = $( ".selector" ).draggable( "option", "handle" );
611
//setter
612
$( ".selector" ).draggable( "option", "handle", 'h2' );</code></pre>
613
</dd>
614
 
615
    </dl>
616
  </div>
617
</li>
618
 
619
 
620
<li class="option" id="option-helper">
621
  <div class="option-header">
622
    <h3 class="option-name"><a href="#option-helper">helper</a></h3>
623
    <dl>
624
      <dt class="option-type-label">Type:</dt>
625
        <dd class="option-type">String, Function</dd>
626
 
627
      <dt class="option-default-label">Default:</dt>
628
        <dd class="option-default">'original'</dd>
629
 
630
    </dl>
631
  </div>
632
  <div class="option-description">
633
    <p>Allows for a helper element to be used for dragging display. Possible values: 'original', 'clone', Function. If a function is specified, it must return a DOMElement.</p>
634
  </div>
635
  <div class="option-examples">
636
    <h4>Code examples</h4>
637
    <dl class="option-examples-list">
638
 
639
<dt>
640
  Initialize a draggable with the <code>helper</code> option specified.
641
</dt>
642
<dd>
643
<pre><code>$( ".selector" ).draggable({ helper: 'clone' });</code></pre>
644
</dd>
645
 
646
 
647
<dt>
648
  Get or set the <code>helper</code> option, after init.
649
</dt>
650
<dd>
651
<pre><code>//getter
652
var helper = $( ".selector" ).draggable( "option", "helper" );
653
//setter
654
$( ".selector" ).draggable( "option", "helper", 'clone' );</code></pre>
655
</dd>
656
 
657
    </dl>
658
  </div>
659
</li>
660
 
661
 
662
<li class="option" id="option-iframeFix">
663
  <div class="option-header">
664
    <h3 class="option-name"><a href="#option-iframeFix">iframeFix</a></h3>
665
    <dl>
666
      <dt class="option-type-label">Type:</dt>
667
        <dd class="option-type">Boolean, Selector</dd>
668
 
669
      <dt class="option-default-label">Default:</dt>
670
        <dd class="option-default">false</dd>
671
 
672
    </dl>
673
  </div>
674
  <div class="option-description">
675
    <p>Prevent iframes from capturing the mousemove events during a drag. Useful in combination with cursorAt, or in any case, if the mouse cursor is not over the helper. If set to true, transparent overlays will be placed over all iframes on the page. If a selector is supplied, the matched iframes will have an overlay placed over them.</p>
676
  </div>
677
  <div class="option-examples">
678
    <h4>Code examples</h4>
679
    <dl class="option-examples-list">
680
 
681
<dt>
682
  Initialize a draggable with the <code>iframeFix</code> option specified.
683
</dt>
684
<dd>
685
<pre><code>$( ".selector" ).draggable({ iframeFix: true });</code></pre>
686
</dd>
687
 
688
 
689
<dt>
690
  Get or set the <code>iframeFix</code> option, after init.
691
</dt>
692
<dd>
693
<pre><code>//getter
694
var iframeFix = $( ".selector" ).draggable( "option", "iframeFix" );
695
//setter
696
$( ".selector" ).draggable( "option", "iframeFix", true );</code></pre>
697
</dd>
698
 
699
    </dl>
700
  </div>
701
</li>
702
 
703
 
704
<li class="option" id="option-opacity">
705
  <div class="option-header">
706
    <h3 class="option-name"><a href="#option-opacity">opacity</a></h3>
707
    <dl>
708
      <dt class="option-type-label">Type:</dt>
709
        <dd class="option-type">Float</dd>
710
 
711
      <dt class="option-default-label">Default:</dt>
712
        <dd class="option-default">false</dd>
713
 
714
    </dl>
715
  </div>
716
  <div class="option-description">
717
    <p>Opacity for the helper while being dragged.</p>
718
  </div>
719
  <div class="option-examples">
720
    <h4>Code examples</h4>
721
    <dl class="option-examples-list">
722
 
723
<dt>
724
  Initialize a draggable with the <code>opacity</code> option specified.
725
</dt>
726
<dd>
727
<pre><code>$( ".selector" ).draggable({ opacity: 0.35 });</code></pre>
728
</dd>
729
 
730
 
731
<dt>
732
  Get or set the <code>opacity</code> option, after init.
733
</dt>
734
<dd>
735
<pre><code>//getter
736
var opacity = $( ".selector" ).draggable( "option", "opacity" );
737
//setter
738
$( ".selector" ).draggable( "option", "opacity", 0.35 );</code></pre>
739
</dd>
740
 
741
    </dl>
742
  </div>
743
</li>
744
 
745
 
746
<li class="option" id="option-refreshPositions">
747
  <div class="option-header">
748
    <h3 class="option-name"><a href="#option-refreshPositions">refreshPositions</a></h3>
749
    <dl>
750
      <dt class="option-type-label">Type:</dt>
751
        <dd class="option-type">Boolean</dd>
752
 
753
      <dt class="option-default-label">Default:</dt>
754
        <dd class="option-default">false</dd>
755
 
756
    </dl>
757
  </div>
758
  <div class="option-description">
759
    <p>If set to true, all droppable positions are calculated on every mousemove. Caution: This solves issues on highly dynamic pages, but dramatically decreases performance.</p>
760
  </div>
761
  <div class="option-examples">
762
    <h4>Code examples</h4>
763
    <dl class="option-examples-list">
764
 
765
<dt>
766
  Initialize a draggable with the <code>refreshPositions</code> option specified.
767
</dt>
768
<dd>
769
<pre><code>$( ".selector" ).draggable({ refreshPositions: true });</code></pre>
770
</dd>
771
 
772
 
773
<dt>
774
  Get or set the <code>refreshPositions</code> option, after init.
775
</dt>
776
<dd>
777
<pre><code>//getter
778
var refreshPositions = $( ".selector" ).draggable( "option", "refreshPositions" );
779
//setter
780
$( ".selector" ).draggable( "option", "refreshPositions", true );</code></pre>
781
</dd>
782
 
783
    </dl>
784
  </div>
785
</li>
786
 
787
 
788
<li class="option" id="option-revert">
789
  <div class="option-header">
790
    <h3 class="option-name"><a href="#option-revert">revert</a></h3>
791
    <dl>
792
      <dt class="option-type-label">Type:</dt>
793
        <dd class="option-type">Boolean, String</dd>
794
 
795
      <dt class="option-default-label">Default:</dt>
796
        <dd class="option-default">false</dd>
797
 
798
    </dl>
799
  </div>
800
  <div class="option-description">
801
    <p>If set to true, the element will return to its start position when dragging stops. Possible string values: 'valid', 'invalid'. If set to invalid, revert will only occur if the draggable has not been dropped on a droppable. For valid, it's the other way around.</p>
802
  </div>
803
  <div class="option-examples">
804
    <h4>Code examples</h4>
805
    <dl class="option-examples-list">
806
 
807
<dt>
808
  Initialize a draggable with the <code>revert</code> option specified.
809
</dt>
810
<dd>
811
<pre><code>$( ".selector" ).draggable({ revert: true });</code></pre>
812
</dd>
813
 
814
 
815
<dt>
816
  Get or set the <code>revert</code> option, after init.
817
</dt>
818
<dd>
819
<pre><code>//getter
820
var revert = $( ".selector" ).draggable( "option", "revert" );
821
//setter
822
$( ".selector" ).draggable( "option", "revert", true );</code></pre>
823
</dd>
824
 
825
    </dl>
826
  </div>
827
</li>
828
 
829
 
830
<li class="option" id="option-revertDuration">
831
  <div class="option-header">
832
    <h3 class="option-name"><a href="#option-revertDuration">revertDuration</a></h3>
833
    <dl>
834
      <dt class="option-type-label">Type:</dt>
835
        <dd class="option-type">Integer</dd>
836
 
837
      <dt class="option-default-label">Default:</dt>
838
        <dd class="option-default">500</dd>
839
 
840
    </dl>
841
  </div>
842
  <div class="option-description">
843
    <p>The duration of the revert animation, in milliseconds. Ignored if revert is false.</p>
844
  </div>
845
  <div class="option-examples">
846
    <h4>Code examples</h4>
847
    <dl class="option-examples-list">
848
 
849
<dt>
850
  Initialize a draggable with the <code>revertDuration</code> option specified.
851
</dt>
852
<dd>
853
<pre><code>$( ".selector" ).draggable({ revertDuration: 1000 });</code></pre>
854
</dd>
855
 
856
 
857
<dt>
858
  Get or set the <code>revertDuration</code> option, after init.
859
</dt>
860
<dd>
861
<pre><code>//getter
862
var revertDuration = $( ".selector" ).draggable( "option", "revertDuration" );
863
//setter
864
$( ".selector" ).draggable( "option", "revertDuration", 1000 );</code></pre>
865
</dd>
866
 
867
    </dl>
868
  </div>
869
</li>
870
 
871
 
872
<li class="option" id="option-scope">
873
  <div class="option-header">
874
    <h3 class="option-name"><a href="#option-scope">scope</a></h3>
875
    <dl>
876
      <dt class="option-type-label">Type:</dt>
877
        <dd class="option-type">String</dd>
878
 
879
      <dt class="option-default-label">Default:</dt>
880
        <dd class="option-default">'default'</dd>
881
 
882
    </dl>
883
  </div>
884
  <div class="option-description">
885
    <p>Used to group sets of draggable and droppable items, in addition to droppable's accept option. A draggable with the same scope value as a droppable will be accepted by the droppable.</p>
886
  </div>
887
  <div class="option-examples">
888
    <h4>Code examples</h4>
889
    <dl class="option-examples-list">
890
 
891
<dt>
892
  Initialize a draggable with the <code>scope</code> option specified.
893
</dt>
894
<dd>
895
<pre><code>$( ".selector" ).draggable({ scope: 'tasks' });</code></pre>
896
</dd>
897
 
898
 
899
<dt>
900
  Get or set the <code>scope</code> option, after init.
901
</dt>
902
<dd>
903
<pre><code>//getter
904
var scope = $( ".selector" ).draggable( "option", "scope" );
905
//setter
906
$( ".selector" ).draggable( "option", "scope", 'tasks' );</code></pre>
907
</dd>
908
 
909
    </dl>
910
  </div>
911
</li>
912
 
913
 
914
<li class="option" id="option-scroll">
915
  <div class="option-header">
916
    <h3 class="option-name"><a href="#option-scroll">scroll</a></h3>
917
    <dl>
918
      <dt class="option-type-label">Type:</dt>
919
        <dd class="option-type">Boolean</dd>
920
 
921
      <dt class="option-default-label">Default:</dt>
922
        <dd class="option-default">true</dd>
923
 
924
    </dl>
925
  </div>
926
  <div class="option-description">
927
    <p>If set to true, container auto-scrolls while dragging.</p>
928
  </div>
929
  <div class="option-examples">
930
    <h4>Code examples</h4>
931
    <dl class="option-examples-list">
932
 
933
<dt>
934
  Initialize a draggable with the <code>scroll</code> option specified.
935
</dt>
936
<dd>
937
<pre><code>$( ".selector" ).draggable({ scroll: false });</code></pre>
938
</dd>
939
 
940
 
941
<dt>
942
  Get or set the <code>scroll</code> option, after init.
943
</dt>
944
<dd>
945
<pre><code>//getter
946
var scroll = $( ".selector" ).draggable( "option", "scroll" );
947
//setter
948
$( ".selector" ).draggable( "option", "scroll", false );</code></pre>
949
</dd>
950
 
951
    </dl>
952
  </div>
953
</li>
954
 
955
 
956
<li class="option" id="option-scrollSensitivity">
957
  <div class="option-header">
958
    <h3 class="option-name"><a href="#option-scrollSensitivity">scrollSensitivity</a></h3>
959
    <dl>
960
      <dt class="option-type-label">Type:</dt>
961
        <dd class="option-type">Integer</dd>
962
 
963
      <dt class="option-default-label">Default:</dt>
964
        <dd class="option-default">20</dd>
965
 
966
    </dl>
967
  </div>
968
  <div class="option-description">
969
    <p>Distance in pixels from the edge of the viewport after which the viewport should scroll. Distance is relative to pointer, not the draggable.</p>
970
  </div>
971
  <div class="option-examples">
972
    <h4>Code examples</h4>
973
    <dl class="option-examples-list">
974
 
975
<dt>
976
  Initialize a draggable with the <code>scrollSensitivity</code> option specified.
977
</dt>
978
<dd>
979
<pre><code>$( ".selector" ).draggable({ scrollSensitivity: 40 });</code></pre>
980
</dd>
981
 
982
 
983
<dt>
984
  Get or set the <code>scrollSensitivity</code> option, after init.
985
</dt>
986
<dd>
987
<pre><code>//getter
988
var scrollSensitivity = $( ".selector" ).draggable( "option", "scrollSensitivity" );
989
//setter
990
$( ".selector" ).draggable( "option", "scrollSensitivity", 40 );</code></pre>
991
</dd>
992
 
993
    </dl>
994
  </div>
995
</li>
996
 
997
 
998
<li class="option" id="option-scrollSpeed">
999
  <div class="option-header">
1000
    <h3 class="option-name"><a href="#option-scrollSpeed">scrollSpeed</a></h3>
1001
    <dl>
1002
      <dt class="option-type-label">Type:</dt>
1003
        <dd class="option-type">Integer</dd>
1004
 
1005
      <dt class="option-default-label">Default:</dt>
1006
        <dd class="option-default">20</dd>
1007
 
1008
    </dl>
1009
  </div>
1010
  <div class="option-description">
1011
    <p>The speed at which the window should scroll once the mouse pointer gets within the <code>scrollSensitivity</code> distance.</p>
1012
  </div>
1013
  <div class="option-examples">
1014
    <h4>Code examples</h4>
1015
    <dl class="option-examples-list">
1016
 
1017
<dt>
1018
  Initialize a draggable with the <code>scrollSpeed</code> option specified.
1019
</dt>
1020
<dd>
1021
<pre><code>$( ".selector" ).draggable({ scrollSpeed: 40 });</code></pre>
1022
</dd>
1023
 
1024
 
1025
<dt>
1026
  Get or set the <code>scrollSpeed</code> option, after init.
1027
</dt>
1028
<dd>
1029
<pre><code>//getter
1030
var scrollSpeed = $( ".selector" ).draggable( "option", "scrollSpeed" );
1031
//setter
1032
$( ".selector" ).draggable( "option", "scrollSpeed", 40 );</code></pre>
1033
</dd>
1034
 
1035
    </dl>
1036
  </div>
1037
</li>
1038
 
1039
 
1040
<li class="option" id="option-snap">
1041
  <div class="option-header">
1042
    <h3 class="option-name"><a href="#option-snap">snap</a></h3>
1043
    <dl>
1044
      <dt class="option-type-label">Type:</dt>
1045
        <dd class="option-type">Boolean, Selector</dd>
1046
 
1047
      <dt class="option-default-label">Default:</dt>
1048
        <dd class="option-default">false</dd>
1049
 
1050
    </dl>
1051
  </div>
1052
  <div class="option-description">
1053
    <p>If set to a selector or to true (equivalent to '.ui-draggable'), the draggable will snap to the edges of the selected elements when near an edge of the element.</p>
1054
  </div>
1055
  <div class="option-examples">
1056
    <h4>Code examples</h4>
1057
    <dl class="option-examples-list">
1058
 
1059
<dt>
1060
  Initialize a draggable with the <code>snap</code> option specified.
1061
</dt>
1062
<dd>
1063
<pre><code>$( ".selector" ).draggable({ snap: true });</code></pre>
1064
</dd>
1065
 
1066
 
1067
<dt>
1068
  Get or set the <code>snap</code> option, after init.
1069
</dt>
1070
<dd>
1071
<pre><code>//getter
1072
var snap = $( ".selector" ).draggable( "option", "snap" );
1073
//setter
1074
$( ".selector" ).draggable( "option", "snap", true );</code></pre>
1075
</dd>
1076
 
1077
    </dl>
1078
  </div>
1079
</li>
1080
 
1081
 
1082
<li class="option" id="option-snapMode">
1083
  <div class="option-header">
1084
    <h3 class="option-name"><a href="#option-snapMode">snapMode</a></h3>
1085
    <dl>
1086
      <dt class="option-type-label">Type:</dt>
1087
        <dd class="option-type">String</dd>
1088
 
1089
      <dt class="option-default-label">Default:</dt>
1090
        <dd class="option-default">'both'</dd>
1091
 
1092
    </dl>
1093
  </div>
1094
  <div class="option-description">
1095
    <p>Determines which edges of snap elements the draggable will snap to. Ignored if snap is false. Possible values: 'inner', 'outer', 'both'</p>
1096
  </div>
1097
  <div class="option-examples">
1098
    <h4>Code examples</h4>
1099
    <dl class="option-examples-list">
1100
 
1101
<dt>
1102
  Initialize a draggable with the <code>snapMode</code> option specified.
1103
</dt>
1104
<dd>
1105
<pre><code>$( ".selector" ).draggable({ snapMode: 'outer' });</code></pre>
1106
</dd>
1107
 
1108
 
1109
<dt>
1110
  Get or set the <code>snapMode</code> option, after init.
1111
</dt>
1112
<dd>
1113
<pre><code>//getter
1114
var snapMode = $( ".selector" ).draggable( "option", "snapMode" );
1115
//setter
1116
$( ".selector" ).draggable( "option", "snapMode", 'outer' );</code></pre>
1117
</dd>
1118
 
1119
    </dl>
1120
  </div>
1121
</li>
1122
 
1123
 
1124
<li class="option" id="option-snapTolerance">
1125
  <div class="option-header">
1126
    <h3 class="option-name"><a href="#option-snapTolerance">snapTolerance</a></h3>
1127
    <dl>
1128
      <dt class="option-type-label">Type:</dt>
1129
        <dd class="option-type">Integer</dd>
1130
 
1131
      <dt class="option-default-label">Default:</dt>
1132
        <dd class="option-default">20</dd>
1133
 
1134
    </dl>
1135
  </div>
1136
  <div class="option-description">
1137
    <p>The distance in pixels from the snap element edges at which snapping should occur. Ignored if snap is false.</p>
1138
  </div>
1139
  <div class="option-examples">
1140
    <h4>Code examples</h4>
1141
    <dl class="option-examples-list">
1142
 
1143
<dt>
1144
  Initialize a draggable with the <code>snapTolerance</code> option specified.
1145
</dt>
1146
<dd>
1147
<pre><code>$( ".selector" ).draggable({ snapTolerance: 40 });</code></pre>
1148
</dd>
1149
 
1150
 
1151
<dt>
1152
  Get or set the <code>snapTolerance</code> option, after init.
1153
</dt>
1154
<dd>
1155
<pre><code>//getter
1156
var snapTolerance = $( ".selector" ).draggable( "option", "snapTolerance" );
1157
//setter
1158
$( ".selector" ).draggable( "option", "snapTolerance", 40 );</code></pre>
1159
</dd>
1160
 
1161
    </dl>
1162
  </div>
1163
</li>
1164
 
1165
 
1166
<li class="option" id="option-stack">
1167
  <div class="option-header">
1168
    <h3 class="option-name"><a href="#option-stack">stack</a></h3>
1169
    <dl>
1170
      <dt class="option-type-label">Type:</dt>
1171
        <dd class="option-type">Selector</dd>
1172
 
1173
      <dt class="option-default-label">Default:</dt>
1174
        <dd class="option-default">false</dd>
1175
 
1176
    </dl>
1177
  </div>
1178
  <div class="option-description">
1179
    <p>Controls the z-Index of the set of elements that match the selector, always brings to front the dragged item. Very useful in things like window managers.</p>
1180
  </div>
1181
  <div class="option-examples">
1182
    <h4>Code examples</h4>
1183
    <dl class="option-examples-list">
1184
 
1185
<dt>
1186
  Initialize a draggable with the <code>stack</code> option specified.
1187
</dt>
1188
<dd>
1189
<pre><code>$( ".selector" ).draggable({ stack: &quot;.products&quot; });</code></pre>
1190
</dd>
1191
 
1192
 
1193
<dt>
1194
  Get or set the <code>stack</code> option, after init.
1195
</dt>
1196
<dd>
1197
<pre><code>//getter
1198
var stack = $( ".selector" ).draggable( "option", "stack" );
1199
//setter
1200
$( ".selector" ).draggable( "option", "stack", &quot;.products&quot; );</code></pre>
1201
</dd>
1202
 
1203
    </dl>
1204
  </div>
1205
</li>
1206
 
1207
 
1208
<li class="option" id="option-zIndex">
1209
  <div class="option-header">
1210
    <h3 class="option-name"><a href="#option-zIndex">zIndex</a></h3>
1211
    <dl>
1212
      <dt class="option-type-label">Type:</dt>
1213
        <dd class="option-type">Integer</dd>
1214
 
1215
      <dt class="option-default-label">Default:</dt>
1216
        <dd class="option-default">false</dd>
1217
 
1218
    </dl>
1219
  </div>
1220
  <div class="option-description">
1221
    <p>z-index for the helper while being dragged.</p>
1222
  </div>
1223
  <div class="option-examples">
1224
    <h4>Code examples</h4>
1225
    <dl class="option-examples-list">
1226
 
1227
<dt>
1228
  Initialize a draggable with the <code>zIndex</code> option specified.
1229
</dt>
1230
<dd>
1231
<pre><code>$( ".selector" ).draggable({ zIndex: 2700 });</code></pre>
1232
</dd>
1233
 
1234
 
1235
<dt>
1236
  Get or set the <code>zIndex</code> option, after init.
1237
</dt>
1238
<dd>
1239
<pre><code>//getter
1240
var zIndex = $( ".selector" ).draggable( "option", "zIndex" );
1241
//setter
1242
$( ".selector" ).draggable( "option", "zIndex", 2700 );</code></pre>
1243
</dd>
1244
 
1245
    </dl>
1246
  </div>
1247
</li>
1248
 
1249
    </ul>
1250
  </div>
1251
  <div id="events">
1252
    <h2 class="top-header">Events</h2>
1253
    <ul class="events-list">
1254
 
1255
<li class="event" id="event-start">
1256
  <div class="event-header">
1257
    <h3 class="event-name"><a href="#event-start">start</a></h3>
1258
    <dl>
1259
      <dt class="event-type-label">Type:</dt>
1260
        <dd class="event-type">dragstart</dd>
1261
    </dl>
1262
  </div>
1263
  <div class="event-description">
1264
    <p>This event is triggered when dragging starts.</p>
1265
  </div>
1266
  <div class="event-examples">
1267
    <h4>Code examples</h4>
1268
    <dl class="event-examples-list">
1269
 
1270
<dt>
1271
  Supply a callback function to handle the <code>start</code> event as an init option.
1272
</dt>
1273
<dd>
1274
<pre><code>$( &quot;.selector&quot; ).draggable({
1275
   start: function(event, ui) { ... }
1276
});</code></pre>
1277
</dd>
1278
 
1279
 
1280
<dt>
1281
  Bind to the <code>start</code> event by type: <code>dragstart</code>.
1282
</dt>
1283
<dd>
1284
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dragstart&quot;, function(event, ui) {
1285
  ...
1286
});</code></pre>
1287
</dd>
1288
 
1289
    </dl>
1290
  </div>
1291
</li>
1292
 
1293
 
1294
<li class="event" id="event-drag">
1295
  <div class="event-header">
1296
    <h3 class="event-name"><a href="#event-drag">drag</a></h3>
1297
    <dl>
1298
      <dt class="event-type-label">Type:</dt>
1299
        <dd class="event-type">drag</dd>
1300
    </dl>
1301
  </div>
1302
  <div class="event-description">
1303
    <p>This event is triggered when the mouse is moved during the dragging.</p>
1304
  </div>
1305
  <div class="event-examples">
1306
    <h4>Code examples</h4>
1307
    <dl class="event-examples-list">
1308
 
1309
<dt>
1310
  Supply a callback function to handle the <code>drag</code> event as an init option.
1311
</dt>
1312
<dd>
1313
<pre><code>$( &quot;.selector&quot; ).draggable({
1314
   drag: function(event, ui) { ... }
1315
});</code></pre>
1316
</dd>
1317
 
1318
 
1319
<dt>
1320
  Bind to the <code>drag</code> event by type: <code>drag</code>.
1321
</dt>
1322
<dd>
1323
<pre><code>$( &quot;.selector&quot; ).bind( &quot;drag&quot;, function(event, ui) {
1324
  ...
1325
});</code></pre>
1326
</dd>
1327
 
1328
    </dl>
1329
  </div>
1330
</li>
1331
 
1332
 
1333
<li class="event" id="event-stop">
1334
  <div class="event-header">
1335
    <h3 class="event-name"><a href="#event-stop">stop</a></h3>
1336
    <dl>
1337
      <dt class="event-type-label">Type:</dt>
1338
        <dd class="event-type">dragstop</dd>
1339
    </dl>
1340
  </div>
1341
  <div class="event-description">
1342
    <p>This event is triggered when dragging stops.</p>
1343
  </div>
1344
  <div class="event-examples">
1345
    <h4>Code examples</h4>
1346
    <dl class="event-examples-list">
1347
 
1348
<dt>
1349
  Supply a callback function to handle the <code>stop</code> event as an init option.
1350
</dt>
1351
<dd>
1352
<pre><code>$( &quot;.selector&quot; ).draggable({
1353
   stop: function(event, ui) { ... }
1354
});</code></pre>
1355
</dd>
1356
 
1357
 
1358
<dt>
1359
  Bind to the <code>stop</code> event by type: <code>dragstop</code>.
1360
</dt>
1361
<dd>
1362
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dragstop&quot;, function(event, ui) {
1363
  ...
1364
});</code></pre>
1365
</dd>
1366
 
1367
    </dl>
1368
  </div>
1369
</li>
1370
 
1371
    </ul>
1372
  </div>
1373
  <div id="methods">
1374
    <h2 class="top-header">Methods</h2>
1375
    <ul class="methods-list">
1376
 
1377
<li class="method" id="method-destroy">
1378
  <div class="method-header">
1379
    <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
1380
    <dl>
1381
      <dt class="method-signature-label">Signature:</dt>
1382
        <dd class="method-signature">.draggable( "destroy"
1383
 
1384
 
1385
 
1386
 
1387
 
1388
 
1389
 
1390
)</dd>
1391
    </dl>
1392
  </div>
1393
  <div class="method-description">
1394
    <p>Remove the draggable functionality completely. This will return the element back to its pre-init state.</p>
1395
  </div>
1396
</li>
1397
 
1398
 
1399
<li class="method" id="method-disable">
1400
  <div class="method-header">
1401
    <h3 class="method-name"><a href="#method-disable">disable</a></h3>
1402
    <dl>
1403
      <dt class="method-signature-label">Signature:</dt>
1404
        <dd class="method-signature">.draggable( "disable"
1405
 
1406
 
1407
 
1408
 
1409
 
1410
 
1411
 
1412
)</dd>
1413
    </dl>
1414
  </div>
1415
  <div class="method-description">
1416
    <p>Disable the draggable.</p>
1417
  </div>
1418
</li>
1419
 
1420
 
1421
<li class="method" id="method-enable">
1422
  <div class="method-header">
1423
    <h3 class="method-name"><a href="#method-enable">enable</a></h3>
1424
    <dl>
1425
      <dt class="method-signature-label">Signature:</dt>
1426
        <dd class="method-signature">.draggable( "enable"
1427
 
1428
 
1429
 
1430
 
1431
 
1432
 
1433
 
1434
)</dd>
1435
    </dl>
1436
  </div>
1437
  <div class="method-description">
1438
    <p>Enable the draggable.</p>
1439
  </div>
1440
</li>
1441
 
1442
 
1443
<li class="method" id="method-option">
1444
  <div class="method-header">
1445
    <h3 class="method-name"><a href="#method-option">option</a></h3>
1446
    <dl>
1447
      <dt class="method-signature-label">Signature:</dt>
1448
        <dd class="method-signature">.draggable( "option"
1449
 
1450
, optionName
1451
 
1452
, <span class="optional">[</span>value<span class="optional">] </span>
1453
 
1454
 
1455
 
1456
)</dd>
1457
    </dl>
1458
  </div>
1459
  <div class="method-description">
1460
    <p>Get or set any draggable option. If no value is specified, will act as a getter.</p>
1461
  </div>
1462
</li>
1463
 
1464
 
1465
<li class="method" id="method-option">
1466
  <div class="method-header">
1467
    <h3 class="method-name"><a href="#method-option">option</a></h3>
1468
    <dl>
1469
      <dt class="method-signature-label">Signature:</dt>
1470
        <dd class="method-signature">.draggable( "option"
1471
 
1472
, options
1473
 
1474
 
1475
 
1476
 
1477
 
1478
)</dd>
1479
    </dl>
1480
  </div>
1481
  <div class="method-description">
1482
    <p>Set multiple draggable options at once by providing an options object.</p>
1483
  </div>
1484
</li>
1485
 
1486
 
1487
<li class="method" id="method-widget">
1488
  <div class="method-header">
1489
    <h3 class="method-name"><a href="#method-widget">widget</a></h3>
1490
    <dl>
1491
      <dt class="method-signature-label">Signature:</dt>
1492
        <dd class="method-signature">.draggable( "widget"
1493
 
1494
 
1495
 
1496
 
1497
 
1498
 
1499
 
1500
)</dd>
1501
    </dl>
1502
  </div>
1503
  <div class="method-description">
1504
    <p>Returns the .ui-draggable element.</p>
1505
  </div>
1506
</li>
1507
 
1508
 
1509
    </ul>
1510
  </div>
1511
  <div id="theming">
1512
    <h2 class="top-header">Theming</h2>
1513
    <p>The jQuery UI Draggable 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.
1514
</p>
1515
  <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.draggable.css stylesheet that can be modified. These classes are highlighed in bold below.
1516
</p>
1517
 
1518
  <h3>Sample markup with jQuery UI CSS Framework classes</h3>
1519
  &lt;div class=&quot;<strong>ui-draggable</strong>&quot;&gt;&lt;/div&gt;
1520
  <p class="theme-note">
1521
    <strong>
1522
      Note: This is a sample of markup generated by the draggable plugin, not markup you should use to create a draggable. The only markup needed for that is &lt;div&gt;&lt;/div&gt;.
1523
    </strong>
1524
  </p>
1525
 
1526
  </div>
1527
</div>
1528
 
1529
</p><!--
1530
Pre-expand include size: 59871 bytes
1531
Post-expand include size: 104871 bytes
1532
Template argument size: 58170 bytes
1533
Maximum: 2097152 bytes
1534
-->
1535
 
1536
<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3768-1!1!0!!en!2 and timestamp 20100910103629 -->