source: ether_statistics/web/resources/js/library/jquery-ui-1.9.0.custom/development-bundle/docs/droppable.html @ 605

Last change on this file since 605 was 605, checked in by vmipsl, 12 years ago

images
File size: 24.5 KB
Line 
1<!doctype html>
2<html lang="en">
3<head>
4        <meta charset="utf-8">
5        <title>jQuery UI droppable documentation</title>
6
7        <style>
8        body {
9                font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"
10        }
11        .gutter {
12                display: none;
13        }
14        </style>
15</head>
16<body>
17
18<script>{
19                "title":
20                        "Droppable Widget",
21                "excerpt":
22                        "Create targets for draggable elements.",
23                "termSlugs": {
24                        "category": [
25                                "interactions"
26                        ]
27                }
28        }</script><section class="quick-nav"><header><h2>QuickNav</h2></header><div class="quick-nav-section">
29<h3>Options</h3>
30<div><a href="#option-accept">accept</a></div>
31<div><a href="#option-activeClass">activeClass</a></div>
32<div><a href="#option-addClasses">addClasses</a></div>
33<div><a href="#option-disabled">disabled</a></div>
34<div><a href="#option-greedy">greedy</a></div>
35<div><a href="#option-hoverClass">hoverClass</a></div>
36<div><a href="#option-scope">scope</a></div>
37<div><a href="#option-tolerance">tolerance</a></div>
38</div>
39<div class="quick-nav-section">
40<h3>Methods</h3>
41<div><a href="#method-destroy">destroy</a></div>
42<div><a href="#method-disable">disable</a></div>
43<div><a href="#method-enable">enable</a></div>
44<div><a href="#method-option">option</a></div>
45<div><a href="#method-widget">widget</a></div>
46</div>
47<div class="quick-nav-section">
48<h3>Events</h3>
49<div><a href="#event-create">create</a></div>
50<div><a href="#event-activate">activate</a></div>
51<div><a href="#event-deactivate">deactivate</a></div>
52<div><a href="#event-over">over</a></div>
53<div><a href="#event-out">out</a></div>
54<div><a href="#event-drop">drop</a></div>
55</div></section><article id="droppable1" class="entry widget"><h2 class="section-title">
56<span>Droppable Widget</span><span class="version-details">version added: 1.0</span>
57</h2>
58<div class="entry-wrapper">
59<p class="desc"><strong>Description: </strong>Create targets for draggable elements.</p>
60<section id="options"><header><h2 class="underline">Options</h2></header><div id="option-accept" class="api-item first-item">
61<h3>accept<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Selector">Selector</a> or <a href="http://api.jquery.com/Types/#Function">Function</a>()</span>
62</h3>
63<div class="default">
64<strong>Default: </strong><code>"*"</code>
65</div>
66<div>Controls which draggable elements are accepted by the droppable.</div>
67<strong>Multiple types supported:</strong><ul>
68<li>
69<strong>Selector</strong>: A selector indicating which draggable elements are accepted.</li>
70<li>
71<strong>Function</strong>: A function that will be called for each draggable on the page (passed as the first argument to the function). The function must return <code>true</code> if the draggable should be accepted.</li>
72</ul>
73</div>
74<div id="option-activeClass" class="api-item">
75<h3>activeClass<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
76</h3>
77<div class="default">
78<strong>Default: </strong><code>false</code>
79</div>
80<div>If specified, the class will be added to the droppable while an acceptable draggable is being dragged.</div>
81</div>
82<div id="option-addClasses" class="api-item">
83<h3>addClasses<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
84</h3>
85<div class="default">
86<strong>Default: </strong><code>true</code>
87</div>
88<div>If set to <code>false</code>, will prevent the <code>ui-droppable</code> class from being added. This may be desired as a performance optimization when calling <code>.droppable()</code> init on hundreds of elements.</div>
89</div>
90<div id="option-disabled" class="api-item">
91<h3>disabled<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
92</h3>
93<div class="default">
94<strong>Default: </strong><code>false</code>
95</div>
96<div>Disables the droppable if set to <code>true</code>.</div>
97</div>
98<div id="option-greedy" class="api-item">
99<h3>greedy<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
100</h3>
101<div class="default">
102<strong>Default: </strong><code>false</code>
103</div>
104<div>By default, when an element is dropped on nested droppables, each droppable will receive the element. However, by setting this option to <code>true</code>, any parent droppables will not receive the element.</div>
105</div>
106<div id="option-hoverClass" class="api-item">
107<h3>hoverClass<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
108</h3>
109<div class="default">
110<strong>Default: </strong><code>false</code>
111</div>
112<div>If specified, the class will be added to the droppable while an acceptable draggable is being hovered over the droppable.</div>
113</div>
114<div id="option-scope" class="api-item">
115<h3>scope<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
116</h3>
117<div class="default">
118<strong>Default: </strong><code>"default"</code>
119</div>
120<div>Used to group sets of draggable and droppable items, in addition to the <a href="#option-accept"><code>accept</code></a> option. A draggable with the same scope value as a droppable will be accepted.</div>
121</div>
122<div id="option-tolerance" class="api-item">
123<h3>tolerance<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
124</h3>
125<div class="default">
126<strong>Default: </strong><code>"intersect"</code>
127</div>
128<div>
129                                Specifies which mode to use for testing whether a draggable is hovering over a droppable. Possible values:
130                                <ul>
131                                        <li>
132<code>"fit"</code>: Draggable overlaps the droppable entirely.</li>
133                                        <li>
134<code>"intersect"</code>: Draggable overlaps the droppable at least 50% in both directions.</li>
135                                        <li>
136<code>"pointer"</code>: Mouse pointer overlaps the droppable.</li>
137                                        <li>
138<code>"touch"</code>: Draggable overlaps the droppable any amount.</li>
139                                </ul>
140                        </div>
141</div></section><section id="methods"><header><h2 class="underline">Methods</h2></header><div id="method-destroy"><div class="api-item first-item">
142<h3>destroy()</h3>
143<div>
144                Removes the droppable functionality completely. This will return the element back to its pre-init state.
145        </div>
146</div></div>
147<div id="method-disable"><div class="api-item">
148<h3>disable()</h3>
149<div>
150                Disables the droppable.
151        </div>
152</div></div>
153<div id="method-enable"><div class="api-item">
154<h3>enable()</h3>
155<div>
156                Enables the droppable.
157        </div>
158</div></div>
159<div id="method-option">
160<div class="api-item">
161<h3>option( optionName ) <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#Object">Object</a></span>
162</h3>
163<div>Gets the value currently associated with the specified <code>optionName</code>.</div>
164<ul><li>
165<div><strong>optionName</strong></div>
166<div>Type: <a href="http://api.jquery.com/Types#String">String</a>
167</div>
168<div>The name of the option to get.</div>
169</li></ul>
170</div>
171<div class="api-item">
172<h3>option() <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#PlainObject">PlainObject</a></span>
173</h3>
174<div>Gets an object containing key/value pairs representing the current droppable options hash.</div>
175</div>
176<div class="api-item">
177<h3>option( optionName, value )</h3>
178<div>Sets the value of the droppable option associated with the specified <code>optionName</code>.</div>
179<ul>
180<li>
181<div><strong>optionName</strong></div>
182<div>Type: <a href="http://api.jquery.com/Types#String">String</a>
183</div>
184<div>The name of the option to set.</div>
185</li>
186<li>
187<div><strong>value</strong></div>
188<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
189</div>
190<div>A value to set for the option.</div>
191</li>
192</ul>
193</div>
194<div class="api-item">
195<h3>option( options )</h3>
196<div>Sets one or more options for the droppable.</div>
197<ul><li>
198<div><strong>options</strong></div>
199<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
200</div>
201<div>A map of option-value pairs to set.</div>
202</li></ul>
203</div>
204</div>
205<div id="method-widget"><div class="api-item">
206<h3>widget() <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
207</h3>
208<div>
209                Returns a <code>jQuery</code> object containing the droppable element.
210        </div>
211</div></div></section><section id="events"><header><h2 class="underline">Events</h2></header><div id="event-activate" class="api-item first-item">
212<h3>activate( event, ui )</h3>
213<div>Triggered when an accepted draggable starts dragging. This can be useful if you want to make the droppable "light up" when it can be dropped on.</div>
214<ul>
215<li>
216<div><strong>event</strong></div>
217<div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
218</div>
219<div></div>
220</li>
221<li>
222<div><strong>ui</strong></div>
223<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
224</div>
225<div></div>
226<ul>
227<li>
228<div><strong>draggable</strong></div>
229<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
230</div>
231<div>A jQuery object representing the draggable element.</div>
232</li>
233<li>
234<div><strong>helper</strong></div>
235<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
236</div>
237<div>A jQuery object representing the helper that is being dragged.</div>
238</li>
239<li>
240<div><strong>position</strong></div>
241<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
242</div>
243<div>Current CSS position of the draggable helper as <code>{ top, left }</code> object.</div>
244</li>
245<li>
246<div><strong>offset</strong></div>
247<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
248</div>
249<div>Current offset position of the draggable helper as <code>{ top, left }</code> object.</div>
250</li>
251</ul>
252</li>
253</ul>
254</div>
255<div id="event-create" class="api-item">
256<h3>create( event, ui )</h3>
257<div>
258                Triggered when the droppable is created.
259        </div>
260<ul>
261<li>
262<div><strong>event</strong></div>
263<div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
264</div>
265<div></div>
266</li>
267<li>
268<div><strong>ui</strong></div>
269<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
270</div>
271<div></div>
272</li>
273</ul>
274</div>
275<div id="event-deactivate" class="api-item">
276<h3>deactivate( event, ui )</h3>
277<div>Triggered when an accepted draggable stops dragging.</div>
278<ul>
279<li>
280<div><strong>event</strong></div>
281<div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
282</div>
283<div></div>
284</li>
285<li>
286<div><strong>ui</strong></div>
287<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
288</div>
289<div></div>
290<ul>
291<li>
292<div><strong>draggable</strong></div>
293<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
294</div>
295<div>A jQuery object representing the draggable element.</div>
296</li>
297<li>
298<div><strong>helper</strong></div>
299<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
300</div>
301<div>A jQuery object representing the helper that is being dragged.</div>
302</li>
303<li>
304<div><strong>position</strong></div>
305<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
306</div>
307<div>Current CSS position of the draggable helper as <code>{ top, left }</code> object.</div>
308</li>
309<li>
310<div><strong>offset</strong></div>
311<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
312</div>
313<div>Current offset position of the draggable helper as <code>{ top, left }</code> object.</div>
314</li>
315</ul>
316</li>
317</ul>
318</div>
319<div id="event-drop" class="api-item">
320<h3>drop( event, ui )</h3>
321<div>Triggered when an accepted draggable is dropped on the droppable (based on the<a href="#option-tolerance"><code>tolerance</code></a> option).</div>
322<ul>
323<li>
324<div><strong>event</strong></div>
325<div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
326</div>
327<div></div>
328</li>
329<li>
330<div><strong>ui</strong></div>
331<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
332</div>
333<div></div>
334<ul>
335<li>
336<div><strong>draggable</strong></div>
337<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
338</div>
339<div>A jQuery object representing the draggable element.</div>
340</li>
341<li>
342<div><strong>helper</strong></div>
343<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
344</div>
345<div>A jQuery object representing the helper that is being dragged.</div>
346</li>
347<li>
348<div><strong>position</strong></div>
349<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
350</div>
351<div>Current CSS position of the draggable helper as <code>{ top, left }</code> object.</div>
352</li>
353<li>
354<div><strong>offset</strong></div>
355<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
356</div>
357<div>Current offset position of the draggable helper as <code>{ top, left }</code> object.</div>
358</li>
359</ul>
360</li>
361</ul>
362</div>
363<div id="event-out" class="api-item">
364<h3>out( event, ui )</h3>
365<div>Triggered when an accepted draggable is dragged out of the droppable (based on the<a href="#option-tolerance"><code>tolerance</code></a> option).</div>
366<ul>
367<li>
368<div><strong>event</strong></div>
369<div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
370</div>
371<div></div>
372</li>
373<li>
374<div><strong>ui</strong></div>
375<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
376</div>
377<div></div>
378</li>
379</ul>
380</div>
381<div id="event-over" class="api-item">
382<h3>over( event, ui )</h3>
383<div>Triggered when an accepted draggable is dragged over the droppable (based on the<a href="#option-tolerance"><code>tolerance</code></a> option).</div>
384<ul>
385<li>
386<div><strong>event</strong></div>
387<div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
388</div>
389<div></div>
390</li>
391<li>
392<div><strong>ui</strong></div>
393<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
394</div>
395<div></div>
396<ul>
397<li>
398<div><strong>draggable</strong></div>
399<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
400</div>
401<div>A jQuery object representing the draggable element.</div>
402</li>
403<li>
404<div><strong>helper</strong></div>
405<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
406</div>
407<div>A jQuery object representing the helper that is being dragged.</div>
408</li>
409<li>
410<div><strong>position</strong></div>
411<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
412</div>
413<div>Current CSS position of the draggable helper as <code>{ top, left }</code> object.</div>
414</li>
415<li>
416<div><strong>offset</strong></div>
417<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
418</div>
419<div>Current offset position of the draggable helper as <code>{ top, left }</code> object.</div>
420</li>
421</ul>
422</li>
423</ul>
424</div></section><div class="longdesc">
425                <p>The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by <a href="/draggable/">draggables</a>). You can specify which draggables each will accept.</p>
426        </div>
427<section class="entry-examples" id="entry-examples"><header><h2 class="underline">Example:</h2></header><div class="entry-example" id="example-0">
428<h4><span class="desc">A pair of draggable and droppable elements.</span></h4>
429<div class="syntaxhighlighter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div><div class="line number12 index11 alt1">12</div><div class="line number13 index12 alt2">13</div><div class="line number14 index13 alt1">14</div><div class="line number15 index14 alt2">15</div><div class="line number16 index15 alt1">16</div><div class="line number17 index16 alt2">17</div><div class="line number18 index17 alt1">18</div><div class="line number19 index18 alt2">19</div><div class="line number20 index19 alt1">20</div><div class="line number21 index20 alt2">21</div><div class="line number22 index21 alt1">22</div><div class="line number23 index22 alt2">23</div><div class="line number24 index23 alt1">24</div><div class="line number25 index24 alt2">25</div><div class="line number26 index25 alt1">26</div><div class="line number27 index26 alt2">27</div><div class="line number28 index27 alt1">28</div><div class="line number29 index28 alt2">29</div><div class="line number30 index29 alt1">30</div><div class="line number31 index30 alt2">31</div><div class="line number32 index31 alt1">32</div><div class="line number33 index32 alt2">33</div><div class="line number34 index33 alt1">34</div><div class="line number35 index34 alt2">35</div><div class="line number36 index35 alt1">36</div><div class="line number37 index36 alt2">37</div><div class="line number38 index37 alt1">38</div><div class="line number39 index38 alt2">39</div><div class="line number40 index39 alt1">40</div><div class="line number41 index40 alt2">41</div><div class="line number42 index41 alt1">42</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">&lt;!doctype html&gt;</code></div><div class="line number2 index1 alt1"><code class="plain">&lt;</code><code class="keyword">html</code> <code class="color1">lang</code><code class="plain">=</code><code class="string">"en"</code><code class="plain">&gt;</code></div><div class="line number3 index2 alt2"><code class="plain">&lt;</code><code class="keyword">head</code><code class="plain">&gt;</code></div><div class="line number4 index3 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">meta</code> <code class="color1">charset</code><code class="plain">=</code><code class="string">"utf-8"</code><code class="plain">&gt;</code></div><div class="line number5 index4 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">title</code><code class="plain">&gt;droppable demo&lt;/</code><code class="keyword">title</code><code class="plain">&gt;</code></div><div class="line number6 index5 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">link</code> <code class="color1">rel</code><code class="plain">=</code><code class="string">"stylesheet"</code> <code class="color1">href</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css</a>"</code><code class="plain">&gt;</code></div><div class="line number7 index6 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">style</code><code class="plain">&gt;</code></div><div class="line number8 index7 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">#draggable {</code></div><div class="line number9 index8 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">width: 100px;</code></div><div class="line number10 index9 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">height: 100px;</code></div><div class="line number11 index10 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">background: #ccc;</code></div><div class="line number12 index11 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></div><div class="line number13 index12 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">#droppable {</code></div><div class="line number14 index13 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">position: absolute;</code></div><div class="line number15 index14 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">left: 250px;</code></div><div class="line number16 index15 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">top: 0;</code></div><div class="line number17 index16 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">width: 125px;</code></div><div class="line number18 index17 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">height: 125px;</code></div><div class="line number19 index18 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">background: #999;</code></div><div class="line number20 index19 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">color: #fff;</code></div><div class="line number21 index20 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">padding: 10px;</code></div><div class="line number22 index21 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></div><div class="line number23 index22 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;/</code><code class="keyword">style</code><code class="plain">&gt;</code></div><div class="line number24 index23 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/jquery-1.8.2.js">http://code.jquery.com/jquery-1.8.2.js</a>"</code><code class="plain">&gt;&lt;/</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number25 index24 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/ui/1.9.0/jquery-ui.js">http://code.jquery.com/ui/1.9.0/jquery-ui.js</a>"</code><code class="plain">&gt;&lt;/</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number26 index25 alt1"><code class="plain">&lt;/</code><code class="keyword">head</code><code class="plain">&gt;</code></div><div class="line number27 index26 alt2"><code class="plain">&lt;</code><code class="keyword">body</code><code class="plain">&gt;</code></div><div class="line number28 index27 alt1">&nbsp;</div><div class="line number29 index28 alt2"><code class="plain">&lt;</code><code class="keyword">div</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"droppable"</code><code class="plain">&gt;Drop here&lt;/</code><code class="keyword">div</code><code class="plain">&gt;</code></div><div class="line number30 index29 alt1"><code class="plain">&lt;</code><code class="keyword">div</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"draggable"</code><code class="plain">&gt;Drag me&lt;/</code><code class="keyword">div</code><code class="plain">&gt;</code></div><div class="line number31 index30 alt2">&nbsp;</div><div class="line number32 index31 alt1"><code class="plain">&lt;</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number33 index32 alt2"><code class="plain">$( "#draggable" ).draggable();</code></div><div class="line number34 index33 alt1"><code class="plain">$( "#droppable" ).droppable({</code></div><div class="line number35 index34 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">drop: function() {</code></div><div class="line number36 index35 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">alert( "dropped" );</code></div><div class="line number37 index36 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></div><div class="line number38 index37 alt1"><code class="plain">});</code></div><div class="line number39 index38 alt2"><code class="plain">&lt;/</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number40 index39 alt1">&nbsp;</div><div class="line number41 index40 alt2"><code class="plain">&lt;/</code><code class="keyword">body</code><code class="plain">&gt;</code></div><div class="line number42 index41 alt1"><code class="plain">&lt;/</code><code class="keyword">html</code><code class="plain">&gt;</code></div></div></td></tr></tbody></table></div>
430<h4>Demo:</h4>
431<div class="demo code-demo"></div>
432</div></section>
433</div></article>
434
435</body>
436</html>
Note: See TracBrowser for help on using the repository browser.