← Back to branch summary

~smagoun/whoopsie/whoopsie-lp1017637

« back to all changes in this revision

Viewing changes to backend/stats/static/js/yui/docs/dd/delegate-plugins.html

  • Committer: Evan Dandrea
  • Date: 2012-05-09 05:53:45 UTC
  • Revision ID: evan.dandrea@canonical.com-20120509055345-z2j41tmcbf4as5uf
The backend now lives in lp:daisy and the website (errors.ubuntu.com) now lives in lp:errors.

Show diffs side-by-side

added added

removed removed

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