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