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