← Back to branch summary

~lutostag/ubuntu/utopic/maas/1.5.2

« back to all changes in this revision

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

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-03-15 18:14:08 UTC
  • mfrom: (1.1.3)
  • Revision ID: package-import@ubuntu.com-20120315181408-zgl94hzo0x4n99an
Tags: 0.1+bzr295+dfsg-0ubuntu2
* debian/patches:
  - 01-fix-database-settings.patch: Update to set PSERV_URL.
  - 02-pserv-config.patch: Set port to 8001.
* debian/maas.postinst: Run maas-import-isos on install.
* debian/control: Depends on rabbitmq-server.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/dd/shim-drag.html
 
1
<!DOCTYPE html>
 
2
<html lang="en">
 
3
<head>
 
4
    <meta charset="utf-8">
 
5
    <title>Example: Using the Drag Shim</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 the Drag Shim</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 the use of the drag shim when dragging nodes over other troublesome nodes.</p>
 
24
</div>
 
25
 
 
26
<div class="example">
 
27
    <style>
 
28
    #demo {
 
29
        height: 100px;
 
30
        width: 100px;
 
31
        border: 1px solid black;
 
32
        cursor: move;
 
33
        float: right;
 
34
    }
 
35
    #ifrm {
 
36
        width: 400px;
 
37
        height: 300px;
 
38
    }
 
39
</style>
 
40
 
 
41
<p>Try dragging the proxy element over the iframe below, in most browsers this will not happen. Now click the <code>Shim off</code> button and drag again. Now you can drag over the iframe.</p>
 
42
 
 
43
<p>You can see the shim by clicking the <code>Debug Off</code> button.</p>
 
44
 
 
45
<p><button id="shim" value="off">Shim Off</button> <button id="debugShim" value="off" disabled>Debug Off</button></p>
 
46
 
 
47
<div id="demo">Drag Me</div>
 
48
 
 
49
<iframe id="ifrm" src="../assets/dd/blank.htm"></iframe>
 
50
 
 
51
<script>
 
52
YUI().use('dd-ddm', 'dd-drag', 'dd-proxy', function(Y) {
 
53
        //Toggling the buttons
 
54
        Y.one('#shim').on('click', function(e) {
 
55
            var value = e.target.get('value');
 
56
            if (value == 'off' || value == 'Shim Off') {
 
57
                dd.set('useShim', true);
 
58
                e.target.set('value', 'on');
 
59
                e.target.set('innerHTML', 'Shim On');
 
60
                Y.one('#debugShim').set('disabled', false);
 
61
            } else {
 
62
                dd.set('useShim', false);
 
63
                e.target.set('value', 'off');
 
64
                e.target.set('innerHTML', 'Shim Off');
 
65
                Y.one('#debugShim').set('disabled', true);
 
66
            }
 
67
        });
 
68
        
 
69
        Y.one('#debugShim').on('click', function(e) {
 
70
            var value = e.target.get('value');
 
71
            if (value == 'off' || value == 'Debug Off') {
 
72
                Y.DD.DDM._debugShim = true;
 
73
                e.target.set('value', 'on');
 
74
                e.target.set('innerHTML', 'Debug On');
 
75
            } else {
 
76
                Y.DD.DDM._debugShim = false;
 
77
                e.target.set('value', 'off');
 
78
                e.target.set('innerHTML', 'Debug Off');
 
79
            }
 
80
        });
 
81
        
 
82
        var dd = new Y.DD.Drag({
 
83
            //Selector of the node to make draggable
 
84
            node: '#demo',
 
85
            useShim: false
 
86
        }).plug(Y.Plugin.DDProxy, {
 
87
            offsetNode: false,
 
88
            resizeFrame: false
 
89
        });
 
90
        dd.on('drag:start', function() {
 
91
            this.get('dragNode').setStyles({
 
92
                height: '20px',
 
93
                width: '100px',
 
94
                backgroundColor: 'blue',
 
95
                color: '#fff'
 
96
            });
 
97
            this.get('dragNode').set('innerHTML', 'Custom Proxy');
 
98
            this.deltaXY = [this.deltaXY[0] - 20, this.deltaXY[1] - 20];
 
99
        });
 
100
});
 
101
 
 
102
 
 
103
</script>
 
104
 
 
105
</div>
 
106
 
 
107
<h3 id="using-the-shim">Using the shim</h3>
 
108
<p>Full source code for this example.</p>
 
109
 
 
110
<pre class="code prettyprint">YUI().use(&#x27;dd-ddm&#x27;, &#x27;dd-drag&#x27;, &#x27;dd-proxy&#x27;, function(Y) {
 
111
        &#x2F;&#x2F;Toggling the buttons
 
112
        Y.one(&#x27;#shim&#x27;).on(&#x27;click&#x27;, function(e) {
 
113
            var value = e.target.get(&#x27;value&#x27;);
 
114
            if (value == &#x27;off&#x27; || value == &#x27;Shim Off&#x27;) {
 
115
                dd.set(&#x27;useShim&#x27;, true);
 
116
                e.target.set(&#x27;value&#x27;, &#x27;on&#x27;);
 
117
                e.target.set(&#x27;innerHTML&#x27;, &#x27;Shim On&#x27;);
 
118
                Y.one(&#x27;#debugShim&#x27;).set(&#x27;disabled&#x27;, false);
 
119
            } else {
 
120
                dd.set(&#x27;useShim&#x27;, false);
 
121
                e.target.set(&#x27;value&#x27;, &#x27;off&#x27;);
 
122
                e.target.set(&#x27;innerHTML&#x27;, &#x27;Shim Off&#x27;);
 
123
                Y.one(&#x27;#debugShim&#x27;).set(&#x27;disabled&#x27;, true);
 
124
            }
 
125
        });
 
126
        
 
127
        Y.one(&#x27;#debugShim&#x27;).on(&#x27;click&#x27;, function(e) {
 
128
            var value = e.target.get(&#x27;value&#x27;);
 
129
            if (value == &#x27;off&#x27; || value == &#x27;Debug Off&#x27;) {
 
130
                Y.DD.DDM._debugShim = true;
 
131
                e.target.set(&#x27;value&#x27;, &#x27;on&#x27;);
 
132
                e.target.set(&#x27;innerHTML&#x27;, &#x27;Debug On&#x27;);
 
133
            } else {
 
134
                Y.DD.DDM._debugShim = false;
 
135
                e.target.set(&#x27;value&#x27;, &#x27;off&#x27;);
 
136
                e.target.set(&#x27;innerHTML&#x27;, &#x27;Debug Off&#x27;);
 
137
            }
 
138
        });
 
139
        
 
140
        var dd = new Y.DD.Drag({
 
141
            &#x2F;&#x2F;Selector of the node to make draggable
 
142
            node: &#x27;#demo&#x27;,
 
143
            useShim: false
 
144
        }).plug(Y.Plugin.DDProxy, {
 
145
            offsetNode: false,
 
146
            resizeFrame: false
 
147
        });
 
148
        dd.on(&#x27;drag:start&#x27;, function() {
 
149
            this.get(&#x27;dragNode&#x27;).setStyles({
 
150
                height: &#x27;20px&#x27;,
 
151
                width: &#x27;100px&#x27;,
 
152
                backgroundColor: &#x27;blue&#x27;,
 
153
                color: &#x27;#fff&#x27;
 
154
            });
 
155
            this.get(&#x27;dragNode&#x27;).set(&#x27;innerHTML&#x27;, &#x27;Custom Proxy&#x27;);
 
156
            this.deltaXY = [this.deltaXY[0] - 20, this.deltaXY[1] - 20];
 
157
        });
 
158
});</pre>
 
159
 
 
160
</div>
 
161
        </div>
 
162
 
 
163
        <div id="sidebar" class="yui3-u">
 
164
            
 
165
                <div id="toc" class="sidebox">
 
166
                    <div class="hd">
 
167
                        <h2 class="no-toc">Table of Contents</h2>
 
168
                    </div>
 
169
 
 
170
                    <div class="bd">
 
171
                        <ul class="toc">
 
172
<li>
 
173
<a href="#using-the-shim">Using the shim</a>
 
174
</li>
 
175
</ul>
 
176
                    </div>
 
177
                </div>
 
178
            
 
179
 
 
180
            
 
181
                <div class="sidebox">
 
182
                    <div class="hd">
 
183
                        <h2 class="no-toc">Examples</h2>
 
184
                    </div>
 
185
 
 
186
                    <div class="bd">
 
187
                        <ul class="examples">
 
188
                            
 
189
                                
 
190
                                    <li data-description="A simple drag interaction that doesn&#x27;t require a drop interaction.">
 
191
                                        <a href="simple-drag.html">Simple Drag</a>
 
192
                                    </li>
 
193
                                
 
194
                            
 
195
                                
 
196
                                    <li data-description="How to apply the Drag Plugin to a node.">
 
197
                                        <a href="drag-plugin.html">Drag - Node plugin</a>
 
198
                                    </li>
 
199
                                
 
200
                            
 
201
                                
 
202
                                    <li data-description="A simple proxy drag interaction that doesn&#x27;t require a drop interaction.">
 
203
                                        <a href="proxy-drag.html">Drag - Proxy</a>
 
204
                                    </li>
 
205
                                
 
206
                            
 
207
                                
 
208
                                    <li data-description="How to constrain a draggable Node to another Node&#x27;s region.">
 
209
                                        <a href="constrained-drag.html">Drag - Constrained to a Region</a>
 
210
                                    </li>
 
211
                                
 
212
                            
 
213
                                
 
214
                                    <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.">
 
215
                                        <a href="groups-drag.html">Drag - Interaction Groups</a>
 
216
                                    </li>
 
217
                                
 
218
                            
 
219
                                
 
220
                                    <li data-description="The use of the drag shim when dragging nodes over other troublesome nodes.">
 
221
                                        <a href="shim-drag.html">Using the Drag Shim</a>
 
222
                                    </li>
 
223
                                
 
224
                            
 
225
                                
 
226
                                    <li data-description="How to use the Drop Target events to code your application.">
 
227
                                        <a href="drop-code.html">Using Drop Based Coding</a>
 
228
                                    </li>
 
229
                                
 
230
                            
 
231
                                
 
232
                                    <li data-description="How you can use the DD Scroll plugin to scroll the browser window as you drag.">
 
233
                                        <a href="winscroll.html">Window Scrolling</a>
 
234
                                    </li>
 
235
                                
 
236
                            
 
237
                                
 
238
                                    <li data-description="How to use DD.Delegate to create a scalable solution which supports multiple draggable items.">
 
239
                                        <a href="delegate.html">Drag Delegation</a>
 
240
                                    </li>
 
241
                                
 
242
                            
 
243
                                
 
244
                                    <li data-description="Using DD.Delegate to support dragging multiple items and dropping them onto a Drop Target.">
 
245
                                        <a href="delegate-drop.html">Drag Delegation with a Drop Target</a>
 
246
                                    </li>
 
247
                                
 
248
                            
 
249
                                
 
250
                                    <li data-description="How to use Drag plugins with a DD Delegate based solution.">
 
251
                                        <a href="delegate-plugins.html">Using Drag Plugins with Delegate</a>
 
252
                                    </li>
 
253
                                
 
254
                            
 
255
                                
 
256
                                    <li data-description="This example shows how to make a sortable list using Custom Event Bubbling.">
 
257
                                        <a href="list-drag.html">List Reorder w/Bubbling</a>
 
258
                                    </li>
 
259
                                
 
260
                            
 
261
                                
 
262
                                    <li data-description="This example shows how to make a sortable list using Custom Event Bubbling and Node Scrolling.">
 
263
                                        <a href="scroll-list.html">List Reorder w/Scrolling</a>
 
264
                                    </li>
 
265
                                
 
266
                            
 
267
                                
 
268
                                    <li data-description="How to make an animated node a Drop target.">
 
269
                                        <a href="anim-drop.html">Animated Drop Targets</a>
 
270
                                    </li>
 
271
                                
 
272
                            
 
273
                                
 
274
                                    <li data-description="Example Photo Browser application.">
 
275
                                        <a href="photo-browser.html">Photo Browser</a>
 
276
                                    </li>
 
277
                                
 
278
                            
 
279
                                
 
280
                                    <li data-description="Portal style example using Drag &amp; Drop Event Bubbling and Animation.">
 
281
                                        <a href="portal-drag.html">Portal Style Example</a>
 
282
                                    </li>
 
283
                                
 
284
                            
 
285
                                
 
286
                            
 
287
                                
 
288
                            
 
289
                        </ul>
 
290
                    </div>
 
291
                </div>
 
292
            
 
293
 
 
294
            
 
295
                <div class="sidebox">
 
296
                    <div class="hd">
 
297
                        <h2 class="no-toc">Examples That Use This Component</h2>
 
298
                    </div>
 
299
 
 
300
                    <div class="bd">
 
301
                        <ul class="examples">
 
302
                            
 
303
                                
 
304
                            
 
305
                                
 
306
                            
 
307
                                
 
308
                            
 
309
                                
 
310
                            
 
311
                                
 
312
                            
 
313
                                
 
314
                            
 
315
                                
 
316
                            
 
317
                                
 
318
                            
 
319
                                
 
320
                            
 
321
                                
 
322
                            
 
323
                                
 
324
                            
 
325
                                
 
326
                            
 
327
                                
 
328
                            
 
329
                                
 
330
                            
 
331
                                
 
332
                            
 
333
                                
 
334
                            
 
335
                                
 
336
                                    <li data-description="Working with multiple YUI instances.">
 
337
                                        <a href="../yui/yui-multi.html">Multiple Instances</a>
 
338
                                    </li>
 
339
                                
 
340
                            
 
341
                                
 
342
                                    <li data-description="Use StyleSheet to adjust the CSS rules applying a page theme from user input">
 
343
                                        <a href="../stylesheet/stylesheet-theme.html">Adjusting a Page Theme on the Fly</a>
 
344
                                    </li>
 
345
                                
 
346
                            
 
347
                        </ul>
 
348
                    </div>
 
349
                </div>
 
350
            
 
351
        </div>
 
352
    </div>
 
353
</div>
 
354
 
 
355
<script src="../assets/vendor/prettify/prettify-min.js"></script>
 
356
<script>prettyPrint();</script>
 
357
 
 
358
</body>
 
359
</html>