← Back to branch summary

~ubuntu-branches/ubuntu/precise/maas/precise-updates

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/dd/delegate-drop.html

Tags: 1.2+bzr1373+dfsg-0ubuntu1~12.04.4
https://launchpad.net/bugs/1039513
https://launchpad.net/bugs/1158425
* SECURITY UPDATE: failure to authenticate downloaded content (LP: #1039513)
  - debian/patches/CVE-2013-1058.patch: Authenticate downloaded files with
    GnuPG and MD5SUM files. Thanks to Julian Edwards.
  - CVE-2013-1058
* SECURITY UPDATE: configuration options may be loaded from current working
  directory (LP: #1158425)
  - debian/patches/CVE-2013-1057-1-2.patch: Do not load configuration
    options from the current working directory. Thanks to Julian Edwards.
  - CVE-2013-1057

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/dd/delegate-drop.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Drag Delegation with a Drop Target</title>
6
 
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
7
 
    <link rel="stylesheet" href="../assets/css/main.css">
8
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
9
 
    <script src="../../build/yui/yui-min.js"></script>
10
 
</head>
11
 
<body>
12
 
 
13
 
<div id="doc">
14
 
    <h1>Example: Drag Delegation with a Drop Target</h1>
15
 
 
16
 
    
17
 
        <a href="#toc" class="jump">Jump to Table of Contents</a>
18
 
    
19
 
 
20
 
    <div class="yui3-g">
21
 
        <div id="main" class="yui3-u">
22
 
            <div class="content"><div class="intro">
23
 
<p>This example shows how to create multiple draggable items efficiently, still allowing for Drop Targets.</p>
24
 
</div>
25
 
 
26
 
<div class="example">
27
 
    <style>
28
 
    #demo {
29
 
        width: 200px;
30
 
    }
31
 
    #demo ul li {
32
 
        border: 1px solid black;
33
 
        background-color: #8DD5E7;
34
 
        cursor: move;
35
 
        margin: 3px;
36
 
        list-style-type: none;
37
 
        z-index: 2;
38
 
        zoom: 1;
39
 
    }
40
 
    #play {
41
 
        position: relative;
42
 
        zoom: 1;
43
 
    }
44
 
    #drop {
45
 
        border: 1px solid black;
46
 
        background-color: #eee;
47
 
        height: 50px;
48
 
        width: 200px;
49
 
        position: absolute;
50
 
        bottom: 5px;
51
 
        right: 5px;
52
 
        zoom: 1;
53
 
    }
54
 
    #drop strong {
55
 
        font-weight: bold;
56
 
    }
57
 
    #drop.yui3-dd-drop-over {
58
 
        background-color: #ccc;
59
 
    }
60
 
 
61
 
 
62
 
</style>
63
 
 
64
 
    <div id="play">
65
 
 
66
 
        <div id="demo">
67
 
            <ul>
68
 
                <li>Item #1</li>
69
 
                <li>Item #2</li>
70
 
                <li>Item #3</li>
71
 
                <li>Item #4</li>
72
 
                <li>Item #5</li>
73
 
                <li>Item #6</li>
74
 
                <li>Item #7</li>
75
 
                <li>Item #8</li>
76
 
                <li>Item #9</li>
77
 
                <li>Item #10</li>
78
 
            </ul>
79
 
        </div>
80
 
        
81
 
        <div id="drop">Drop on me</div>
82
 
    </div>
83
 
 
84
 
 
85
 
 
86
 
<script>
87
 
    YUI().use('dd-delegate', 'dd-drop-plugin', function(Y) {
88
 
        var del = new Y.DD.Delegate({
89
 
            container: '#demo',
90
 
            nodes: 'li'
91
 
        });
92
 
 
93
 
        del.on('drag:end', function(e) {
94
 
            del.get('currentNode').setStyles({
95
 
                top: 0,
96
 
                left: 0
97
 
            });
98
 
        });
99
 
 
100
 
        var drop = Y.one('#drop').plug(Y.Plugin.Drop);
101
 
        drop.drop.on('drop:hit', function(e) {
102
 
            drop.set('innerHTML', 'You dropped: <strong>' + e.drag.get('node').get('innerHTML') + '</strong>');
103
 
        });
104
 
        
105
 
    });
106
 
 
107
 
 
108
 
</script>
109
 
 
110
 
 
111
 
</div>
112
 
 
113
 
<h3 id="setting-up-the-delegate-container-and-items">Setting up the Delegate container and items</h3>
114
 
<p>First we need to create an HTML Node to act as the delegate container and give it some nodes to make draggable.</p>
115
 
 
116
 
<pre class="code prettyprint">&lt;div id=&quot;play&quot;&gt;
117
 
 
118
 
    &lt;div id=&quot;demo&quot;&gt;
119
 
        &lt;ul&gt;
120
 
            &lt;li&gt;Item #1&lt;&#x2F;li&gt;
121
 
            &lt;li&gt;Item #2&lt;&#x2F;li&gt;
122
 
            &lt;li&gt;Item #3&lt;&#x2F;li&gt;
123
 
            &lt;li&gt;Item #4&lt;&#x2F;li&gt;
124
 
            &lt;li&gt;Item #5&lt;&#x2F;li&gt;
125
 
            &lt;li&gt;Item #6&lt;&#x2F;li&gt;
126
 
            &lt;li&gt;Item #7&lt;&#x2F;li&gt;
127
 
            &lt;li&gt;Item #8&lt;&#x2F;li&gt;
128
 
            &lt;li&gt;Item #9&lt;&#x2F;li&gt;
129
 
            &lt;li&gt;Item #10&lt;&#x2F;li&gt;
130
 
        &lt;&#x2F;ul&gt;
131
 
    &lt;&#x2F;div&gt;
132
 
    
133
 
    &lt;div id=&quot;drop&quot;&gt;Drop on me&lt;&#x2F;div&gt;
134
 
&lt;&#x2F;div&gt;</pre>
135
 
 
136
 
 
137
 
<p>Now we give them some CSS to make them visible.</p>
138
 
 
139
 
<pre class="code prettyprint">#demo {
140
 
    width: 200px;
141
 
}
142
 
#demo ul li {
143
 
    border: 1px solid black;
144
 
    background-color: #8DD5E7;
145
 
    cursor: move;
146
 
    margin: 3px;
147
 
    list-style-type: none;
148
 
    z-index: 2;
149
 
    zoom: 1;
150
 
}
151
 
#play {
152
 
    position: relative;
153
 
    zoom: 1;
154
 
}
155
 
#drop {
156
 
    border: 1px solid black;
157
 
    background-color: #eee;
158
 
    height: 50px;
159
 
    width: 200px;
160
 
    position: absolute;
161
 
    bottom: 5px;
162
 
    right: 5px;
163
 
    zoom: 1;
164
 
}
165
 
#drop strong {
166
 
    font-weight: bold;
167
 
}
168
 
#drop.yui3-dd-drop-over {
169
 
    background-color: #ccc;
170
 
}</pre>
171
 
 
172
 
 
173
 
<h3 id="setting-up-the-yui-instance">Setting up the YUI Instance</h3>
174
 
<p>Now we need to create our YUI instance and tell it to load the <code>dd-delegate</code> module.</p>
175
 
 
176
 
<pre class="code prettyprint">YUI().use(&#x27;dd-delegate&#x27;, &#x27;dd-drop-plugin&#x27;);</pre>
177
 
 
178
 
 
179
 
<h3 id="making-the-nodes-draggable">Making the Nodes draggable</h3>
180
 
<p>Now that we have a YUI instance with the <code>dd-delegate</code> module, we need to instantiate the <code>Delegate</code> instance on this container and nodes.</p>
181
 
 
182
 
<pre class="code prettyprint">YUI().use(&#x27;dd-delegate&#x27;, &#x27;dd-drop-plugin&#x27;, function(Y) {
183
 
    var del = new Y.DD.Delegate({
184
 
        container: &#x27;#demo&#x27;,
185
 
        nodes: &#x27;li&#x27;
186
 
    });
187
 
});</pre>
188
 
 
189
 
 
190
 
<h3 id="listening-to-some-events">Listening to some events</h3>
191
 
<p>The <code>Delegate</code> object is a bubble target for the <code>DD.Drag</code> instances. So you can listen on it for all drag related events.</p>
192
 
 
193
 
<pre class="code prettyprint">YUI().use(&#x27;dd-delegate&#x27;, &#x27;dd-drop-plugin&#x27;, function(Y) {
194
 
    var del = new Y.DD.Delegate({
195
 
        container: &#x27;#demo&#x27;,
196
 
        nodes: &#x27;li&#x27;
197
 
    });
198
 
 
199
 
    del.on(&#x27;drag:end&#x27;, function(e) {
200
 
        del.get(&#x27;currentNode&#x27;).setStyles({
201
 
            top: 0,
202
 
            left: 0
203
 
        });
204
 
    });
205
 
 
206
 
});</pre>
207
 
 
208
 
 
209
 
<h3 id="adding-a-drop-target">Adding a Drop Target</h3>
210
 
<p>Now we can add a normal Drop Target to the page.</p>
211
 
 
212
 
<pre class="code prettyprint">var drop = Y.one(&#x27;#drop&#x27;).plug(Y.Plugin.Drop);</pre>
213
 
 
214
 
 
215
 
<p>Once that is created, we can add a <code>drop:hit</code> listener and manipulate the drag instance as we normally would.</p>
216
 
 
217
 
<pre class="code prettyprint">var drop = Y.one(&#x27;#drop&#x27;).plug(Y.Plugin.Drop);
218
 
drop.drop.on(&#x27;drop:hit&#x27;, function(e) {
219
 
    drop.set(&#x27;innerHTML&#x27;, &#x27;You dropped: &lt;strong&gt;&#x27; + e.drag.get(&#x27;node&#x27;).get(&#x27;innerHTML&#x27;) + &#x27;&lt;&#x2F;strong&gt;&#x27;);
220
 
});</pre>
221
 
 
222
 
 
223
 
<h3 id="full-javascript-source">Full Javascript Source</h3>
224
 
 
225
 
<pre class="code prettyprint">YUI().use(&#x27;dd-delegate&#x27;, &#x27;dd-drop-plugin&#x27;, function(Y) {
226
 
    var del = new Y.DD.Delegate({
227
 
        container: &#x27;#demo&#x27;,
228
 
        nodes: &#x27;li&#x27;
229
 
    });
230
 
 
231
 
    del.on(&#x27;drag:end&#x27;, function(e) {
232
 
        del.get(&#x27;currentNode&#x27;).setStyles({
233
 
            top: 0,
234
 
            left: 0
235
 
        });
236
 
    });
237
 
 
238
 
    var drop = Y.one(&#x27;#drop&#x27;).plug(Y.Plugin.Drop);
239
 
    drop.drop.on(&#x27;drop:hit&#x27;, function(e) {
240
 
        drop.set(&#x27;innerHTML&#x27;, &#x27;You dropped: &lt;strong&gt;&#x27; + e.drag.get(&#x27;node&#x27;).get(&#x27;innerHTML&#x27;) + &#x27;&lt;&#x2F;strong&gt;&#x27;);
241
 
    });
242
 
    
243
 
});</pre>
244
 
 
245
 
</div>
246
 
        </div>
247
 
 
248
 
        <div id="sidebar" class="yui3-u">
249
 
            
250
 
                <div id="toc" class="sidebox">
251
 
                    <div class="hd">
252
 
                        <h2 class="no-toc">Table of Contents</h2>
253
 
                    </div>
254
 
 
255
 
                    <div class="bd">
256
 
                        <ul class="toc">
257
 
<li>
258
 
<a href="#setting-up-the-delegate-container-and-items">Setting up the Delegate container and items</a>
259
 
</li>
260
 
<li>
261
 
<a href="#setting-up-the-yui-instance">Setting up the YUI Instance</a>
262
 
</li>
263
 
<li>
264
 
<a href="#making-the-nodes-draggable">Making the Nodes draggable</a>
265
 
</li>
266
 
<li>
267
 
<a href="#listening-to-some-events">Listening to some events</a>
268
 
</li>
269
 
<li>
270
 
<a href="#adding-a-drop-target">Adding a Drop Target</a>
271
 
</li>
272
 
<li>
273
 
<a href="#full-javascript-source">Full Javascript Source</a>
274
 
</li>
275
 
</ul>
276
 
                    </div>
277
 
                </div>
278
 
            
279
 
 
280
 
            
281
 
                <div class="sidebox">
282
 
                    <div class="hd">
283
 
                        <h2 class="no-toc">Examples</h2>
284
 
                    </div>
285
 
 
286
 
                    <div class="bd">
287
 
                        <ul class="examples">
288
 
                            
289
 
                                
290
 
                                    <li data-description="A simple drag interaction that doesn&#x27;t require a drop interaction.">
291
 
                                        <a href="simple-drag.html">Simple Drag</a>
292
 
                                    </li>
293
 
                                
294
 
                            
295
 
                                
296
 
                                    <li data-description="How to apply the Drag Plugin to a node.">
297
 
                                        <a href="drag-plugin.html">Drag - Node plugin</a>
298
 
                                    </li>
299
 
                                
300
 
                            
301
 
                                
302
 
                                    <li data-description="A simple proxy drag interaction that doesn&#x27;t require a drop interaction.">
303
 
                                        <a href="proxy-drag.html">Drag - Proxy</a>
304
 
                                    </li>
305
 
                                
306
 
                            
307
 
                                
308
 
                                    <li data-description="How to constrain a draggable Node to another Node&#x27;s region.">
309
 
                                        <a href="constrained-drag.html">Drag - Constrained to a Region</a>
310
 
                                    </li>
311
 
                                
312
 
                            
313
 
                                
314
 
                                    <li data-description="Using interaction groups, this example demonstrates how to tie into the Drag &amp; Drop Utility&#x27;s interesting moments to provide visual affordances for the current drag operation.">
315
 
                                        <a href="groups-drag.html">Drag - Interaction Groups</a>
316
 
                                    </li>
317
 
                                
318
 
                            
319
 
                                
320
 
                                    <li data-description="The use of the drag shim when dragging nodes over other troublesome nodes.">
321
 
                                        <a href="shim-drag.html">Using the Drag Shim</a>
322
 
                                    </li>
323
 
                                
324
 
                            
325
 
                                
326
 
                                    <li data-description="How to use the Drop Target events to code your application.">
327
 
                                        <a href="drop-code.html">Using Drop Based Coding</a>
328
 
                                    </li>
329
 
                                
330
 
                            
331
 
                                
332
 
                                    <li data-description="How you can use the DD Scroll plugin to scroll the browser window as you drag.">
333
 
                                        <a href="winscroll.html">Window Scrolling</a>
334
 
                                    </li>
335
 
                                
336
 
                            
337
 
                                
338
 
                                    <li data-description="How to use DD.Delegate to create a scalable solution which supports multiple draggable items.">
339
 
                                        <a href="delegate.html">Drag Delegation</a>
340
 
                                    </li>
341
 
                                
342
 
                            
343
 
                                
344
 
                                    <li data-description="Using DD.Delegate to support dragging multiple items and dropping them onto a Drop Target.">
345
 
                                        <a href="delegate-drop.html">Drag Delegation with a Drop Target</a>
346
 
                                    </li>
347
 
                                
348
 
                            
349
 
                                
350
 
                                    <li data-description="How to use Drag plugins with a DD Delegate based solution.">
351
 
                                        <a href="delegate-plugins.html">Using Drag Plugins with Delegate</a>
352
 
                                    </li>
353
 
                                
354
 
                            
355
 
                                
356
 
                                    <li data-description="This example shows how to make a sortable list using Custom Event Bubbling.">
357
 
                                        <a href="list-drag.html">List Reorder w/Bubbling</a>
358
 
                                    </li>
359
 
                                
360
 
                            
361
 
                                
362
 
                                    <li data-description="This example shows how to make a sortable list using Custom Event Bubbling and Node Scrolling.">
363
 
                                        <a href="scroll-list.html">List Reorder w/Scrolling</a>
364
 
                                    </li>
365
 
                                
366
 
                            
367
 
                                
368
 
                                    <li data-description="How to make an animated node a Drop target.">
369
 
                                        <a href="anim-drop.html">Animated Drop Targets</a>
370
 
                                    </li>
371
 
                                
372
 
                            
373
 
                                
374
 
                                    <li data-description="Example Photo Browser application.">
375
 
                                        <a href="photo-browser.html">Photo Browser</a>
376
 
                                    </li>
377
 
                                
378
 
                            
379
 
                                
380
 
                                    <li data-description="Portal style example using Drag &amp; Drop Event Bubbling and Animation.">
381
 
                                        <a href="portal-drag.html">Portal Style Example</a>
382
 
                                    </li>
383
 
                                
384
 
                            
385
 
                                
386
 
                            
387
 
                                
388
 
                            
389
 
                        </ul>
390
 
                    </div>
391
 
                </div>
392
 
            
393
 
 
394
 
            
395
 
                <div class="sidebox">
396
 
                    <div class="hd">
397
 
                        <h2 class="no-toc">Examples That Use This Component</h2>
398
 
                    </div>
399
 
 
400
 
                    <div class="bd">
401
 
                        <ul class="examples">
402
 
                            
403
 
                                
404
 
                            
405
 
                                
406
 
                            
407
 
                                
408
 
                            
409
 
                                
410
 
                            
411
 
                                
412
 
                            
413
 
                                
414
 
                            
415
 
                                
416
 
                            
417
 
                                
418
 
                            
419
 
                                
420
 
                            
421
 
                                
422
 
                            
423
 
                                
424
 
                            
425
 
                                
426
 
                            
427
 
                                
428
 
                            
429
 
                                
430
 
                            
431
 
                                
432
 
                            
433
 
                                
434
 
                            
435
 
                                
436
 
                                    <li data-description="Working with multiple YUI instances.">
437
 
                                        <a href="../yui/yui-multi.html">Multiple Instances</a>
438
 
                                    </li>
439
 
                                
440
 
                            
441
 
                                
442
 
                                    <li data-description="Use StyleSheet to adjust the CSS rules applying a page theme from user input">
443
 
                                        <a href="../stylesheet/stylesheet-theme.html">Adjusting a Page Theme on the Fly</a>
444
 
                                    </li>
445
 
                                
446
 
                            
447
 
                        </ul>
448
 
                    </div>
449
 
                </div>
450
 
            
451
 
        </div>
452
 
    </div>
453
 
</div>
454
 
 
455
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
456
 
<script>prettyPrint();</script>
457
 
 
458
 
</body>
459
 
</html>