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 Droppable</h1>
11
  <div id="overview">
12
    <h2 class="top-header">Overview</h2>
13
    <div id="overview-main">
14
        <p>The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which (individually) or which kind of draggables each will accept.</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.draggable</b> - current draggable element, a jQuery object.</li>
18
 <li> <b>ui.helper</b> - current draggable helper, a jQuery object</li>
19
 <li> <b>ui.position</b> - current position of the draggable helper { top: , left: }</li>
20
 <li> <b>ui.offset</b> - current absolute position of the draggable helper { top: , left: }</li>
21
</ul>
22
    </div>
23
    <div id="overview-dependencies">
24
        <h3>Dependencies</h3>
25
        <ul>
26
<li>UI Core</li>
27
<li><a href="http://docs.jquery.com/UI/Draggable" title="UI/Draggable">UI Draggable</a></li>
28
</ul>
29
    </div>
30
    <div id="overview-example">
31
        <h3>Example</h3>
32
        <div id="overview-example" class="example">
33
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
34
<p><div id="demo" class="tabs-container" rel="100">
35
Makes the div droppable (a drop target for a draggable).<br />
36
</p>
37
<pre>$(&quot;#draggable&quot;).draggable();
38
    $(&quot;#droppable&quot;).droppable({
39
      drop: function() { alert('dropped'); }
40
    });
41
</pre>
42
<p></div><div id="source" class="tabs-container">
43
</p>
44
<pre>&lt;!DOCTYPE html&gt;
45
&lt;html&gt;
46
&lt;head&gt;
47
  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
48
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&quot;&gt;&lt;/script&gt;
49
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
50
  &lt;style type=&quot;text/css&quot;&gt;
51
    #draggable { width: 75px; height: 25px; background: silver; padding: 10px; }
52
    #droppable { position: absolute; left: 250px; top: 0; width: 125px; height: 75px; background: gray; color: white; padding: 10px; }
53
  &lt;/style&gt;
54
  &lt;script&gt;
55
  $(document).ready(function() {
56
    $(&quot;#draggable&quot;).draggable();
57
    $(&quot;#droppable&quot;).droppable({
58
      drop: function() { alert('dropped'); }
59
    });
60
  });
61
  &lt;/script&gt;
62
&lt;/head&gt;
63
&lt;body style="font-size:62.5%;"&gt;
64
 
65
&lt;div id=&quot;droppable&quot;&gt;Drop here&lt;/div&gt;
66
&lt;div id=&quot;draggable&quot;&gt;Drag me&lt;/div&gt;
67
 
68
&lt;/body&gt;
69
&lt;/html&gt;
70
</pre>
71
<p></div>
72
</p><p></div>
73
    </div>
74
  </div>
75
  <div id="options">
76
    <h2 class="top-header">Options</h2>
77
    <ul class="options-list">
78
 
79
<li class="option" id="option-disabled">
80
  <div class="option-header">
81
    <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
82
    <dl>
83
      <dt class="option-type-label">Type:</dt>
84
        <dd class="option-type">Boolean</dd>
85
 
86
      <dt class="option-default-label">Default:</dt>
87
        <dd class="option-default">false</dd>
88
 
89
    </dl>
90
  </div>
91
  <div class="option-description">
92
    <p>Disables (true) or enables (false) the droppable. Can be set when initialising (first creating) the droppable.</p>
93
  </div>
94
  <div class="option-examples">
95
    <h4>Code examples</h4>
96
    <dl class="option-examples-list">
97
 
98
<dt>
99
  Initialize a droppable with the <code>disabled</code> option specified.
100
</dt>
101
<dd>
102
<pre><code>$( ".selector" ).droppable({ disabled: true });</code></pre>
103
</dd>
104
 
105
 
106
<dt>
107
  Get or set the <code>disabled</code> option, after init.
108
</dt>
109
<dd>
110
<pre><code>//getter
111
var disabled = $( ".selector" ).droppable( "option", "disabled" );
112
//setter
113
$( ".selector" ).droppable( "option", "disabled", true );</code></pre>
114
</dd>
115
 
116
    </dl>
117
  </div>
118
</li>
119
 
120
 
121
<li class="option" id="option-accept">
122
  <div class="option-header">
123
    <h3 class="option-name"><a href="#option-accept">accept</a></h3>
124
    <dl>
125
      <dt class="option-type-label">Type:</dt>
126
        <dd class="option-type">Selector, Function</dd>
127
 
128
      <dt class="option-default-label">Default:</dt>
129
        <dd class="option-default">'*'</dd>
130
 
131
    </dl>
132
  </div>
133
  <div class="option-description">
134
    <p>All draggables that match the selector will be accepted. If a function is specified, the function will be called for each draggable on the page (passed as the first argument to the function), to provide a custom filter. The function should return true if the draggable should be accepted.</p>
135
  </div>
136
  <div class="option-examples">
137
    <h4>Code examples</h4>
138
    <dl class="option-examples-list">
139
 
140
<dt>
141
  Initialize a droppable with the <code>accept</code> option specified.
142
</dt>
143
<dd>
144
<pre><code>$( ".selector" ).droppable({ accept: '.special' });</code></pre>
145
</dd>
146
 
147
 
148
<dt>
149
  Get or set the <code>accept</code> option, after init.
150
</dt>
151
<dd>
152
<pre><code>//getter
153
var accept = $( ".selector" ).droppable( "option", "accept" );
154
//setter
155
$( ".selector" ).droppable( "option", "accept", '.special' );</code></pre>
156
</dd>
157
 
158
    </dl>
159
  </div>
160
</li>
161
 
162
 
163
<li class="option" id="option-activeClass">
164
  <div class="option-header">
165
    <h3 class="option-name"><a href="#option-activeClass">activeClass</a></h3>
166
    <dl>
167
      <dt class="option-type-label">Type:</dt>
168
        <dd class="option-type">String</dd>
169
 
170
      <dt class="option-default-label">Default:</dt>
171
        <dd class="option-default">false</dd>
172
 
173
    </dl>
174
  </div>
175
  <div class="option-description">
176
    <p>If specified, the class will be added to the droppable while an acceptable draggable is being dragged.</p>
177
  </div>
178
  <div class="option-examples">
179
    <h4>Code examples</h4>
180
    <dl class="option-examples-list">
181
 
182
<dt>
183
  Initialize a droppable with the <code>activeClass</code> option specified.
184
</dt>
185
<dd>
186
<pre><code>$( ".selector" ).droppable({ activeClass: 'ui-state-highlight' });</code></pre>
187
</dd>
188
 
189
 
190
<dt>
191
  Get or set the <code>activeClass</code> option, after init.
192
</dt>
193
<dd>
194
<pre><code>//getter
195
var activeClass = $( ".selector" ).droppable( "option", "activeClass" );
196
//setter
197
$( ".selector" ).droppable( "option", "activeClass", 'ui-state-highlight' );</code></pre>
198
</dd>
199
 
200
    </dl>
201
  </div>
202
</li>
203
 
204
 
205
<li class="option" id="option-addClasses">
206
  <div class="option-header">
207
    <h3 class="option-name"><a href="#option-addClasses">addClasses</a></h3>
208
    <dl>
209
      <dt class="option-type-label">Type:</dt>
210
        <dd class="option-type">Boolean</dd>
211
 
212
      <dt class="option-default-label">Default:</dt>
213
        <dd class="option-default">true</dd>
214
 
215
    </dl>
216
  </div>
217
  <div class="option-description">
218
    <p>If set to false, will prevent the ui-droppable class from being added. This may be desired as a performance optimization when calling .droppable() init on many hundreds of elements.</p>
219
  </div>
220
  <div class="option-examples">
221
    <h4>Code examples</h4>
222
    <dl class="option-examples-list">
223
 
224
<dt>
225
  Initialize a droppable with the <code>addClasses</code> option specified.
226
</dt>
227
<dd>
228
<pre><code>$( ".selector" ).droppable({ addClasses: false });</code></pre>
229
</dd>
230
 
231
 
232
<dt>
233
  Get or set the <code>addClasses</code> option, after init.
234
</dt>
235
<dd>
236
<pre><code>//getter
237
var addClasses = $( ".selector" ).droppable( "option", "addClasses" );
238
//setter
239
$( ".selector" ).droppable( "option", "addClasses", false );</code></pre>
240
</dd>
241
 
242
    </dl>
243
  </div>
244
</li>
245
 
246
 
247
<li class="option" id="option-greedy">
248
  <div class="option-header">
249
    <h3 class="option-name"><a href="#option-greedy">greedy</a></h3>
250
    <dl>
251
      <dt class="option-type-label">Type:</dt>
252
        <dd class="option-type">Boolean</dd>
253
 
254
      <dt class="option-default-label">Default:</dt>
255
        <dd class="option-default">false</dd>
256
 
257
    </dl>
258
  </div>
259
  <div class="option-description">
260
    <p>If true, will prevent event propagation on nested droppables.</p>
261
  </div>
262
  <div class="option-examples">
263
    <h4>Code examples</h4>
264
    <dl class="option-examples-list">
265
 
266
<dt>
267
  Initialize a droppable with the <code>greedy</code> option specified.
268
</dt>
269
<dd>
270
<pre><code>$( ".selector" ).droppable({ greedy: true });</code></pre>
271
</dd>
272
 
273
 
274
<dt>
275
  Get or set the <code>greedy</code> option, after init.
276
</dt>
277
<dd>
278
<pre><code>//getter
279
var greedy = $( ".selector" ).droppable( "option", "greedy" );
280
//setter
281
$( ".selector" ).droppable( "option", "greedy", true );</code></pre>
282
</dd>
283
 
284
    </dl>
285
  </div>
286
</li>
287
 
288
 
289
<li class="option" id="option-hoverClass">
290
  <div class="option-header">
291
    <h3 class="option-name"><a href="#option-hoverClass">hoverClass</a></h3>
292
    <dl>
293
      <dt class="option-type-label">Type:</dt>
294
        <dd class="option-type">String</dd>
295
 
296
      <dt class="option-default-label">Default:</dt>
297
        <dd class="option-default">false</dd>
298
 
299
    </dl>
300
  </div>
301
  <div class="option-description">
302
    <p>If specified, the class will be added to the droppable while an acceptable draggable is being hovered.</p>
303
  </div>
304
  <div class="option-examples">
305
    <h4>Code examples</h4>
306
    <dl class="option-examples-list">
307
 
308
<dt>
309
  Initialize a droppable with the <code>hoverClass</code> option specified.
310
</dt>
311
<dd>
312
<pre><code>$( ".selector" ).droppable({ hoverClass: 'drophover' });</code></pre>
313
</dd>
314
 
315
 
316
<dt>
317
  Get or set the <code>hoverClass</code> option, after init.
318
</dt>
319
<dd>
320
<pre><code>//getter
321
var hoverClass = $( ".selector" ).droppable( "option", "hoverClass" );
322
//setter
323
$( ".selector" ).droppable( "option", "hoverClass", 'drophover' );</code></pre>
324
</dd>
325
 
326
    </dl>
327
  </div>
328
</li>
329
 
330
 
331
<li class="option" id="option-scope">
332
  <div class="option-header">
333
    <h3 class="option-name"><a href="#option-scope">scope</a></h3>
334
    <dl>
335
      <dt class="option-type-label">Type:</dt>
336
        <dd class="option-type">String</dd>
337
 
338
      <dt class="option-default-label">Default:</dt>
339
        <dd class="option-default">'default'</dd>
340
 
341
    </dl>
342
  </div>
343
  <div class="option-description">
344
    <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.</p>
345
  </div>
346
  <div class="option-examples">
347
    <h4>Code examples</h4>
348
    <dl class="option-examples-list">
349
 
350
<dt>
351
  Initialize a droppable with the <code>scope</code> option specified.
352
</dt>
353
<dd>
354
<pre><code>$( ".selector" ).droppable({ scope: 'tasks' });</code></pre>
355
</dd>
356
 
357
 
358
<dt>
359
  Get or set the <code>scope</code> option, after init.
360
</dt>
361
<dd>
362
<pre><code>//getter
363
var scope = $( ".selector" ).droppable( "option", "scope" );
364
//setter
365
$( ".selector" ).droppable( "option", "scope", 'tasks' );</code></pre>
366
</dd>
367
 
368
    </dl>
369
  </div>
370
</li>
371
 
372
 
373
<li class="option" id="option-tolerance">
374
  <div class="option-header">
375
    <h3 class="option-name"><a href="#option-tolerance">tolerance</a></h3>
376
    <dl>
377
      <dt class="option-type-label">Type:</dt>
378
        <dd class="option-type">String</dd>
379
 
380
      <dt class="option-default-label">Default:</dt>
381
        <dd class="option-default">'intersect'</dd>
382
 
383
    </dl>
384
  </div>
385
  <div class="option-description">
386
    <p>Specifies which mode to use for testing whether a draggable is 'over' a droppable. Possible values: 'fit', 'intersect', 'pointer', 'touch'.
387
</p>
388
<ul>
389
<li><b>fit</b>: draggable overlaps the droppable entirely</li>
390
<li><b>intersect</b>: draggable overlaps the droppable at least 50%</li>
391
<li><b>pointer</b>: mouse pointer overlaps the droppable</li>
392
<li><b>touch</b>: draggable overlaps the droppable any amount</li>
393
</ul>
394
<p></p>
395
  </div>
396
  <div class="option-examples">
397
    <h4>Code examples</h4>
398
    <dl class="option-examples-list">
399
 
400
<dt>
401
  Initialize a droppable with the <code>tolerance</code> option specified.
402
</dt>
403
<dd>
404
<pre><code>$( ".selector" ).droppable({ tolerance: 'fit' });</code></pre>
405
</dd>
406
 
407
 
408
<dt>
409
  Get or set the <code>tolerance</code> option, after init.
410
</dt>
411
<dd>
412
<pre><code>//getter
413
var tolerance = $( ".selector" ).droppable( "option", "tolerance" );
414
//setter
415
$( ".selector" ).droppable( "option", "tolerance", 'fit' );</code></pre>
416
</dd>
417
 
418
    </dl>
419
  </div>
420
</li>
421
 
422
    </ul>
423
  </div>
424
  <div id="events">
425
    <h2 class="top-header">Events</h2>
426
    <ul class="events-list">
427
 
428
<li class="event" id="event-activate">
429
  <div class="event-header">
430
    <h3 class="event-name"><a href="#event-activate">activate</a></h3>
431
    <dl>
432
      <dt class="event-type-label">Type:</dt>
433
        <dd class="event-type">dropactivate</dd>
434
    </dl>
435
  </div>
436
  <div class="event-description">
437
    <p>This event is triggered any time an accepted draggable starts dragging. This can be useful if you want to make the droppable 'light up' when it can be dropped on.</p>
438
  </div>
439
  <div class="event-examples">
440
    <h4>Code examples</h4>
441
    <dl class="event-examples-list">
442
 
443
<dt>
444
  Supply a callback function to handle the <code>activate</code> event as an init option.
445
</dt>
446
<dd>
447
<pre><code>$( &quot;.selector&quot; ).droppable({
448
   activate: function(event, ui) { ... }
449
});</code></pre>
450
</dd>
451
 
452
 
453
<dt>
454
  Bind to the <code>activate</code> event by type: <code>dropactivate</code>.
455
</dt>
456
<dd>
457
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dropactivate&quot;, function(event, ui) {
458
  ...
459
});</code></pre>
460
</dd>
461
 
462
    </dl>
463
  </div>
464
</li>
465
 
466
 
467
<li class="event" id="event-deactivate">
468
  <div class="event-header">
469
    <h3 class="event-name"><a href="#event-deactivate">deactivate</a></h3>
470
    <dl>
471
      <dt class="event-type-label">Type:</dt>
472
        <dd class="event-type">dropdeactivate</dd>
473
    </dl>
474
  </div>
475
  <div class="event-description">
476
    <p>This event is triggered any time an accepted draggable stops dragging.</p>
477
  </div>
478
  <div class="event-examples">
479
    <h4>Code examples</h4>
480
    <dl class="event-examples-list">
481
 
482
<dt>
483
  Supply a callback function to handle the <code>deactivate</code> event as an init option.
484
</dt>
485
<dd>
486
<pre><code>$( &quot;.selector&quot; ).droppable({
487
   deactivate: function(event, ui) { ... }
488
});</code></pre>
489
</dd>
490
 
491
 
492
<dt>
493
  Bind to the <code>deactivate</code> event by type: <code>dropdeactivate</code>.
494
</dt>
495
<dd>
496
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dropdeactivate&quot;, function(event, ui) {
497
  ...
498
});</code></pre>
499
</dd>
500
 
501
    </dl>
502
  </div>
503
</li>
504
 
505
 
506
<li class="event" id="event-over">
507
  <div class="event-header">
508
    <h3 class="event-name"><a href="#event-over">over</a></h3>
509
    <dl>
510
      <dt class="event-type-label">Type:</dt>
511
        <dd class="event-type">dropover</dd>
512
    </dl>
513
  </div>
514
  <div class="event-description">
515
    <p>This event is triggered as an accepted draggable is dragged 'over' (within the tolerance of) this droppable.</p>
516
  </div>
517
  <div class="event-examples">
518
    <h4>Code examples</h4>
519
    <dl class="event-examples-list">
520
 
521
<dt>
522
  Supply a callback function to handle the <code>over</code> event as an init option.
523
</dt>
524
<dd>
525
<pre><code>$( &quot;.selector&quot; ).droppable({
526
   over: function(event, ui) { ... }
527
});</code></pre>
528
</dd>
529
 
530
 
531
<dt>
532
  Bind to the <code>over</code> event by type: <code>dropover</code>.
533
</dt>
534
<dd>
535
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dropover&quot;, function(event, ui) {
536
  ...
537
});</code></pre>
538
</dd>
539
 
540
    </dl>
541
  </div>
542
</li>
543
 
544
 
545
<li class="event" id="event-out">
546
  <div class="event-header">
547
    <h3 class="event-name"><a href="#event-out">out</a></h3>
548
    <dl>
549
      <dt class="event-type-label">Type:</dt>
550
        <dd class="event-type">dropout</dd>
551
    </dl>
552
  </div>
553
  <div class="event-description">
554
    <p>This event is triggered when an accepted draggable is dragged out (within the tolerance of) this droppable.</p>
555
  </div>
556
  <div class="event-examples">
557
    <h4>Code examples</h4>
558
    <dl class="event-examples-list">
559
 
560
<dt>
561
  Supply a callback function to handle the <code>out</code> event as an init option.
562
</dt>
563
<dd>
564
<pre><code>$( &quot;.selector&quot; ).droppable({
565
   out: function(event, ui) { ... }
566
});</code></pre>
567
</dd>
568
 
569
 
570
<dt>
571
  Bind to the <code>out</code> event by type: <code>dropout</code>.
572
</dt>
573
<dd>
574
<pre><code>$( &quot;.selector&quot; ).bind( &quot;dropout&quot;, function(event, ui) {
575
  ...
576
});</code></pre>
577
</dd>
578
 
579
    </dl>
580
  </div>
581
</li>
582
 
583
 
584
<li class="event" id="event-drop">
585
  <div class="event-header">
586
    <h3 class="event-name"><a href="#event-drop">drop</a></h3>
587
    <dl>
588
      <dt class="event-type-label">Type:</dt>
589
        <dd class="event-type">drop</dd>
590
    </dl>
591
  </div>
592
  <div class="event-description">
593
    <p>This event is triggered when an accepted draggable is dropped 'over' (within the tolerance of) this droppable. In the callback, $(this) represents the droppable the draggable is dropped on.
594
ui.draggable represents the draggable.</p>
595
  </div>
596
  <div class="event-examples">
597
    <h4>Code examples</h4>
598
    <dl class="event-examples-list">
599
 
600
<dt>
601
  Supply a callback function to handle the <code>drop</code> event as an init option.
602
</dt>
603
<dd>
604
<pre><code>$( &quot;.selector&quot; ).droppable({
605
   drop: function(event, ui) { ... }
606
});</code></pre>
607
</dd>
608
 
609
 
610
<dt>
611
  Bind to the <code>drop</code> event by type: <code>drop</code>.
612
</dt>
613
<dd>
614
<pre><code>$( &quot;.selector&quot; ).bind( &quot;drop&quot;, function(event, ui) {
615
  ...
616
});</code></pre>
617
</dd>
618
 
619
    </dl>
620
  </div>
621
</li>
622
 
623
    </ul>
624
  </div>
625
  <div id="methods">
626
    <h2 class="top-header">Methods</h2>
627
    <ul class="methods-list">
628
 
629
<li class="method" id="method-destroy">
630
  <div class="method-header">
631
    <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
632
    <dl>
633
      <dt class="method-signature-label">Signature:</dt>
634
        <dd class="method-signature">.droppable( "destroy"
635
 
636
 
637
 
638
 
639
 
640
 
641
 
642
)</dd>
643
    </dl>
644
  </div>
645
  <div class="method-description">
646
    <p>Remove the droppable functionality completely. This will return the element back to its pre-init state.</p>
647
  </div>
648
</li>
649
 
650
 
651
<li class="method" id="method-disable">
652
  <div class="method-header">
653
    <h3 class="method-name"><a href="#method-disable">disable</a></h3>
654
    <dl>
655
      <dt class="method-signature-label">Signature:</dt>
656
        <dd class="method-signature">.droppable( "disable"
657
 
658
 
659
 
660
 
661
 
662
 
663
 
664
)</dd>
665
    </dl>
666
  </div>
667
  <div class="method-description">
668
    <p>Disable the droppable.</p>
669
  </div>
670
</li>
671
 
672
 
673
<li class="method" id="method-enable">
674
  <div class="method-header">
675
    <h3 class="method-name"><a href="#method-enable">enable</a></h3>
676
    <dl>
677
      <dt class="method-signature-label">Signature:</dt>
678
        <dd class="method-signature">.droppable( "enable"
679
 
680
 
681
 
682
 
683
 
684
 
685
 
686
)</dd>
687
    </dl>
688
  </div>
689
  <div class="method-description">
690
    <p>Enable the droppable.</p>
691
  </div>
692
</li>
693
 
694
 
695
<li class="method" id="method-option">
696
  <div class="method-header">
697
    <h3 class="method-name"><a href="#method-option">option</a></h3>
698
    <dl>
699
      <dt class="method-signature-label">Signature:</dt>
700
        <dd class="method-signature">.droppable( "option"
701
 
702
, optionName
703
 
704
, <span class="optional">[</span>value<span class="optional">] </span>
705
 
706
 
707
 
708
)</dd>
709
    </dl>
710
  </div>
711
  <div class="method-description">
712
    <p>Get or set any droppable option. If no value is specified, will act as a getter.</p>
713
  </div>
714
</li>
715
 
716
 
717
<li class="method" id="method-option">
718
  <div class="method-header">
719
    <h3 class="method-name"><a href="#method-option">option</a></h3>
720
    <dl>
721
      <dt class="method-signature-label">Signature:</dt>
722
        <dd class="method-signature">.droppable( "option"
723
 
724
, options
725
 
726
 
727
 
728
 
729
 
730
)</dd>
731
    </dl>
732
  </div>
733
  <div class="method-description">
734
    <p>Set multiple droppable options at once by providing an options object.</p>
735
  </div>
736
</li>
737
 
738
 
739
<li class="method" id="method-widget">
740
  <div class="method-header">
741
    <h3 class="method-name"><a href="#method-widget">widget</a></h3>
742
    <dl>
743
      <dt class="method-signature-label">Signature:</dt>
744
        <dd class="method-signature">.droppable( "widget"
745
 
746
 
747
 
748
 
749
 
750
 
751
 
752
)</dd>
753
    </dl>
754
  </div>
755
  <div class="method-description">
756
    <p>Returns the .ui-droppable element.</p>
757
  </div>
758
</li>
759
 
760
 
761
    </ul>
762
  </div>
763
  <div id="theming">
764
    <h2 class="top-header">Theming</h2>
765
    <p>The jQuery UI Droppable 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.
766
</p>
767
  <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.droppable.css stylesheet that can be modified. These classes are highlighed in bold below.
768
</p>
769
 
770
  <h3>Sample markup with jQuery UI CSS Framework classes</h3>
771
  &lt;div class=&quot;<strong>ui-droppable</strong>&quot;&gt;&lt;/div&gt;
772
  <p class="theme-note">
773
    <strong>
774
      Note: This is a sample of markup generated by the droppable plugin, not markup you should use to create a droppable. The only markup needed for that is &lt;div&gt;&lt;/div&gt;.
775
    </strong>
776
  </p>
777
 
778
  </div>
779
</div>
780
 
781
</p><!--
782
Pre-expand include size: 32197 bytes
783
Post-expand include size: 50778 bytes
784
Template argument size: 26267 bytes
785
Maximum: 2097152 bytes
786
-->
787
 
788
<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3769-1!1!0!!en!2 and timestamp 20100909220227 -->