← Back to branch summary

~ubuntu-branches/ubuntu/raring/maas/raring-updates

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/dd/constrained-drag.html

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-07-03 17:42:37 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20120703174237-p8l0keuuznfg721k
Tags: 0.1+bzr709+dfsg-0ubuntu1
* New Upstream release
* debian/control:
  - Depends on python-celery, python-tempita, libjs-yui3-{full,min},
    libjs-raphael
* debian/maas.install:
  - Install apiclient, celeryconfig.py, maas-import-pxe-files, preseeds_v2.
  - Update to install various files from chroot, rather tha manually copy
    them from the source.
* debian/maas.links: symlink celeryconfig.py
* debian/maas.maas-celery.upstart: Add job.
* debian/rules:
  - Install celery upstart job.
  - Do not install jslibs as packages are now used.
  - Drop copying of maas_local_settings_sample.py as source now ships
    a maas_local_settings.py
* debian/patches:
  - 04-maas-http-fix.patch: Drop. Merged upstream.
  - 01-fix-database-settings.patch: Refreshed.
  - 99_enums_js.patch: Added until creation of enum.js / build process
    is fixed.
* debian/maas.postinst: Update bzr version to correctly handle upgrades.

Show diffs side-by-side

added added

removed removed

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