← Back to branch summary

~ubuntu-branches/ubuntu/saucy/whoopsie-daisy/saucy

« back to all changes in this revision

Viewing changes to backend/stats/static/js/yui/3.4.1/docs/dd/list-drag.html

  • Committer: Package Import Robot
  • Author(s): Evan Dandrea
  • Date: 2012-04-18 13:04:36 UTC
  • Revision ID: package-import@ubuntu.com-20120418130436-vmt93p8fds516lws
Tags: 0.1.32
Fix failing tests on powerpc and ARM.

Show diffs side-by-side

added added

removed removed

Lines of Context:
backend/stats/static/js/yui/3.4.1/docs/dd/list-drag.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: List Reorder w/Bubbling</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: List Reorder w/Bubbling</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 make a sortable list using Custom Event Bubbling.</p>
24
 
</div>
25
 
 
26
 
<div class="example">
27
 
    <style type="text/css" media="screen">
28
 
    .yui3-dd-proxy {
29
 
        text-align: left;
30
 
    }
31
 
    #play {
32
 
        border: 1px solid black;
33
 
        padding: 10px;
34
 
        margin: 10px;
35
 
        zoom: 1;
36
 
    }
37
 
    #play:after { display: block; clear: both; visibility: hidden; content: '.'; height: 0;}
38
 
    #play ul {
39
 
        border: 1px solid black;
40
 
        margin: 10px;
41
 
        width: 200px;
42
 
        height: 300px;
43
 
        float: left;
44
 
        padding: 0;
45
 
        zoom: 1;
46
 
        position: relative;
47
 
    }
48
 
    #play ul li {
49
 
        background-image: none;
50
 
        list-style-type: none;
51
 
        padding-left: 20px;
52
 
        padding: 5px;
53
 
        margin: 2px;
54
 
        cursor: move;
55
 
        zoom: 1;
56
 
        position: relative;
57
 
    }
58
 
    #play ul li.list1 {
59
 
        background-color: #8DD5E7;
60
 
        border:1px solid #004C6D;
61
 
    }
62
 
    #play ul li.list2 {
63
 
        background-color: #EDFF9F;
64
 
        border:1px solid #CDCDCD;
65
 
    }
66
 
</style>
67
 
 
68
 
<div id="play">
69
 
    <ul id="list1">
70
 
        <li class="list1">Item #1</li>
71
 
        <li class="list1">Item #2</li>
72
 
        <li class="list1">Item #3</li>
73
 
        <li class="list1">Item #4</li>
74
 
        <li class="list1">Item #5</li>
75
 
    </ul>
76
 
    <ul id="list2">
77
 
        <li class="list2">Item #1</li>
78
 
        <li class="list2">Item #2</li>
79
 
        <li class="list2">Item #3</li>
80
 
        <li class="list2">Item #4</li>
81
 
        <li class="list2">Item #5</li>
82
 
    </ul>
83
 
</div>
84
 
 
85
 
<script type="text/javascript">
86
 
    YUI().use('dd-constrain', 'dd-proxy', 'dd-drop', function(Y) {
87
 
        //Listen for all drop:over events
88
 
        Y.DD.DDM.on('drop:over', function(e) {
89
 
            //Get a reference to our drag and drop nodes
90
 
            var drag = e.drag.get('node'),
91
 
                drop = e.drop.get('node');
92
 
            
93
 
            //Are we dropping on a li node?
94
 
            if (drop.get('tagName').toLowerCase() === 'li') {
95
 
                //Are we not going up?
96
 
                if (!goingUp) {
97
 
                    drop = drop.get('nextSibling');
98
 
                }
99
 
                //Add the node to this list
100
 
                e.drop.get('node').get('parentNode').insertBefore(drag, drop);
101
 
                //Resize this nodes shim, so we can drop on it later.
102
 
                e.drop.sizeShim();
103
 
            }
104
 
        });
105
 
        //Listen for all drag:drag events
106
 
        Y.DD.DDM.on('drag:drag', function(e) {
107
 
            //Get the last y point
108
 
            var y = e.target.lastXY[1];
109
 
            //is it greater than the lastY var?
110
 
            if (y < lastY) {
111
 
                //We are going up
112
 
                goingUp = true;
113
 
            } else {
114
 
                //We are going down.
115
 
                goingUp = false;
116
 
            }
117
 
            //Cache for next check
118
 
            lastY = y;
119
 
        });
120
 
        //Listen for all drag:start events
121
 
        Y.DD.DDM.on('drag:start', function(e) {
122
 
            //Get our drag object
123
 
            var drag = e.target;
124
 
            //Set some styles here
125
 
            drag.get('node').setStyle('opacity', '.25');
126
 
            drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
127
 
            drag.get('dragNode').setStyles({
128
 
                opacity: '.5',
129
 
                borderColor: drag.get('node').getStyle('borderColor'),
130
 
                backgroundColor: drag.get('node').getStyle('backgroundColor')
131
 
            });
132
 
        });
133
 
        //Listen for a drag:end events
134
 
        Y.DD.DDM.on('drag:end', function(e) {
135
 
            var drag = e.target;
136
 
            //Put our styles back
137
 
            drag.get('node').setStyles({
138
 
                visibility: '',
139
 
                opacity: '1'
140
 
            });
141
 
        });
142
 
        //Listen for all drag:drophit events
143
 
        Y.DD.DDM.on('drag:drophit', function(e) {
144
 
            var drop = e.drop.get('node'),
145
 
                drag = e.drag.get('node');
146
 
 
147
 
            //if we are not on an li, we must have been dropped on a ul
148
 
            if (drop.get('tagName').toLowerCase() !== 'li') {
149
 
                if (!drop.contains(drag)) {
150
 
                    drop.appendChild(drag);
151
 
                }
152
 
            }
153
 
        });
154
 
        
155
 
        //Static Vars
156
 
        var goingUp = false, lastY = 0;
157
 
 
158
 
        //Get the list of li's in the lists and make them draggable
159
 
        var lis = Y.Node.all('#play ul li');
160
 
        lis.each(function(v, k) {
161
 
            var dd = new Y.DD.Drag({
162
 
                node: v,
163
 
                target: {
164
 
                    padding: '0 0 0 20'
165
 
                }
166
 
            }).plug(Y.Plugin.DDProxy, {
167
 
                moveOnEnd: false
168
 
            }).plug(Y.Plugin.DDConstrained, {
169
 
                constrain2node: '#play'
170
 
            });
171
 
        });
172
 
 
173
 
        //Create simple targets for the 2 lists.
174
 
        var uls = Y.Node.all('#play ul');
175
 
        uls.each(function(v, k) {
176
 
            var tar = new Y.DD.Drop({
177
 
                node: v
178
 
            });
179
 
        });
180
 
        
181
 
    });
182
 
 
183
 
 
184
 
</script>
185
 
 
186
 
 
187
 
 
188
 
</div>
189
 
 
190
 
<h3 id="setting-up-the-lists">Setting up the lists</h3>
191
 
<p>First we will make some lists that we want to make sortable.</p>
192
 
 
193
 
<pre class="code prettyprint">&lt;div id=&quot;play&quot;&gt;
194
 
    &lt;ul id=&quot;list1&quot;&gt;
195
 
        &lt;li class=&quot;list1&quot;&gt;Item #1&lt;&#x2F;li&gt;
196
 
        &lt;li class=&quot;list1&quot;&gt;Item #2&lt;&#x2F;li&gt;
197
 
        &lt;li class=&quot;list1&quot;&gt;Item #3&lt;&#x2F;li&gt;
198
 
        &lt;li class=&quot;list1&quot;&gt;Item #4&lt;&#x2F;li&gt;
199
 
        &lt;li class=&quot;list1&quot;&gt;Item #5&lt;&#x2F;li&gt;
200
 
    &lt;&#x2F;ul&gt;
201
 
    &lt;ul id=&quot;list2&quot;&gt;
202
 
        &lt;li class=&quot;list2&quot;&gt;Item #1&lt;&#x2F;li&gt;
203
 
        &lt;li class=&quot;list2&quot;&gt;Item #2&lt;&#x2F;li&gt;
204
 
        &lt;li class=&quot;list2&quot;&gt;Item #3&lt;&#x2F;li&gt;
205
 
        &lt;li class=&quot;list2&quot;&gt;Item #4&lt;&#x2F;li&gt;
206
 
        &lt;li class=&quot;list2&quot;&gt;Item #5&lt;&#x2F;li&gt;
207
 
    &lt;&#x2F;ul&gt;
208
 
&lt;&#x2F;div&gt;</pre>
209
 
 
210
 
 
211
 
<h3 id="setting-up-the-yui-instance">Setting up the YUI Instance</h3>
212
 
<p>Now we need to create our YUI instance and tell it to load the <code>dd-constrain</code>, <code>dd-proxy</code> and <code>dd-drop</code>, modules.</p>
213
 
 
214
 
<pre class="code prettyprint">YUI().use(&#x27;dd-constrain&#x27;, &#x27;dd-proxy&#x27;, &#x27;dd-drop&#x27;, function(Y) {</pre>
215
 
 
216
 
 
217
 
<h3 id="making-the-nodes-drag-instances-and-drop-targets">Making the Nodes Drag Instances and Drop Targets</h3>
218
 
<p>Now we have our YUI instance ready, we can make the list items draggable. We will do this using <code>Y.Node.all</code></p>
219
 
<p>We will be passing the selector string <code>#play ul li</code> to <code>Y.Node.all</code> to have it return a <code>NodeList</code> of the li's in our two lists.
220
 
Using this selector syntax we will be able to add new list markup to the <code>#play</code> div and not have to change our code.</p>
221
 
<p>Then we will walk that <code>NodeList</code> and create our draggable Nodes.</p>
222
 
<p>Note that we are adding the <code>DDProxy</code> and <code>DDConstrained</code> plugins to each Drag instance, and setting the following configuration options: <code>moveOnEnd, constrain2node, target</code>.</p>
223
 
 
224
 
<pre class="code prettyprint">&#x2F;&#x2F;Get the list of li&#x27;s in the lists and make them draggable
225
 
var lis = Y.Node.all(&#x27;#play ul li&#x27;);
226
 
lis.each(function(v, k) {
227
 
    var dd = new Y.DD.Drag({
228
 
        node: v,
229
 
        &#x2F;&#x2F;Make it Drop target and pass this config to the Drop constructor
230
 
        target: {
231
 
            padding: &#x27;0 0 0 20&#x27;
232
 
        }
233
 
    }).plug(Y.Plugin.DDProxy, {
234
 
        &#x2F;&#x2F;Don&#x27;t move the node at the end of the drag
235
 
        moveOnEnd: false
236
 
    }).plug(Y.Plugin.DDConstrained, {
237
 
        &#x2F;&#x2F;Keep it inside the #play node
238
 
        constrain2node: &#x27;#play&#x27;
239
 
    });
240
 
});</pre>
241
 
 
242
 
 
243
 
<h3 id="making-the-list-drop-targets-too">Making the List Drop Targets too</h3>
244
 
<p>We need to make the UL nodes a Drop Target so we can catch drops on the empty space of the list. 
245
 
Using this selector syntax we will be able to add new list markup to the <code>#play</code> div and not have to change our code.</p>
246
 
 
247
 
<pre class="code prettyprint">&#x2F;&#x2F;Create simple targets for the 2 lists.
248
 
var uls = Y.Node.all(&#x27;#play ul&#x27;);
249
 
uls.each(function(v, k) {
250
 
    var tar = new Y.DD.Drop({
251
 
        node: v
252
 
    });
253
 
});</pre>
254
 
 
255
 
 
256
 
<h3 id="using-event-bubbling">Using Event Bubbling</h3>
257
 
<p>By default, all Drag and Drop instances bubble their events up to the DragDropMgr. In this example we are assuming that there are no other Drag Operations in this YUI Instance.</p>
258
 
 
259
 
<h3 id="start-drag-event">Start Drag Event</h3>
260
 
<p>The first thing we will do is handle the drag:start event. In this event, we will set up some styles to apply to the <code>node</code> and <code>dragNode</code> of the current Drag instance.</p>
261
 
<p>We will also be copying the <code>innerHTML</code> of the <code>node</code> and copying that to the <code>innerHTML</code> of the <code>dragNode</code>. </p>
262
 
<p><em>It should be noted, that
263
 
doing this will also copy any <code>id</code>'s of the nodes inside the <code>node</code>. So if you are using this on something that is <code>id</code> based, you may need to remove the <code>id</code>'s
264
 
of the nodes inside the <code>node</code> that is being dragged.
265
 
</em></p>
266
 
 
267
 
<pre class="code prettyprint">Y.DD.DDM.on(&#x27;drag:start&#x27;, function(e) {
268
 
    &#x2F;&#x2F;Get our drag object
269
 
    var drag = e.target;
270
 
    &#x2F;&#x2F;Set some styles here
271
 
    drag.get(&#x27;node&#x27;).setStyle(&#x27;opacity&#x27;, &#x27;.25&#x27;);
272
 
    drag.get(&#x27;dragNode&#x27;).set(&#x27;innerHTML&#x27;, drag.get(&#x27;node&#x27;).get(&#x27;innerHTML&#x27;));
273
 
    drag.get(&#x27;dragNode&#x27;).setStyles({
274
 
        opacity: &#x27;.5&#x27;,
275
 
        borderColor: drag.get(&#x27;node&#x27;).getStyle(&#x27;borderColor&#x27;),
276
 
        backgroundColor: drag.get(&#x27;node&#x27;).getStyle(&#x27;backgroundColor&#x27;)
277
 
    });
278
 
});</pre>
279
 
 
280
 
 
281
 
 
282
 
<h3 id="end-drag-event">End Drag Event</h3>
283
 
<p>In this event, we will reset some of the styles set in the drag:start event.</p>
284
 
 
285
 
<pre class="code prettyprint">Y.DD.DDM.on(&#x27;drag:end&#x27;, function(e) {
286
 
    var drag = e.target;
287
 
    &#x2F;&#x2F;Put our styles back
288
 
    drag.get(&#x27;node&#x27;).setStyles({
289
 
        visibility: &#x27;&#x27;,
290
 
        opacity: &#x27;1&#x27;
291
 
    });
292
 
});</pre>
293
 
 
294
 
 
295
 
<h3 id="drag-event">Drag Event</h3>
296
 
<p>In this event, we will track the up/down movement for later use.</p>
297
 
 
298
 
<pre class="code prettyprint">Y.DD.DDM.on(&#x27;drag:drag&#x27;, function(e) {
299
 
    &#x2F;&#x2F;Get the last y point
300
 
    var y = e.target.lastXY[1];
301
 
    &#x2F;&#x2F;is it greater than the lastY var?
302
 
    if (y &amp;lt; lastY) {
303
 
        &#x2F;&#x2F;We are going up
304
 
        goingUp = true;
305
 
    } else {
306
 
        &#x2F;&#x2F;We are going down.
307
 
        goingUp = false;
308
 
    }
309
 
    &#x2F;&#x2F;Cache for next check
310
 
    lastY = y;
311
 
});</pre>
312
 
 
313
 
 
314
 
<h3 id="over-drop-event">Over Drop Event</h3>
315
 
<p>In this event, know which Target we are over, so we add the Drag node to the list either above or below the current Drop Target.</p>
316
 
 
317
 
<pre class="code prettyprint">Y.DD.DDM.on(&#x27;drop:over&#x27;, function(e) {
318
 
    &#x2F;&#x2F;Get a reference to our drag and drop nodes
319
 
    var drag = e.drag.get(&#x27;node&#x27;),
320
 
        drop = e.drop.get(&#x27;node&#x27;);
321
 
    
322
 
    &#x2F;&#x2F;Are we dropping on a li node?
323
 
    if (drop.get(&#x27;tagName&#x27;).toLowerCase() === &#x27;li&#x27;) {
324
 
        &#x2F;&#x2F;Are we not going up?
325
 
        if (!goingUp) {
326
 
            drop = drop.get(&#x27;nextSibling&#x27;);
327
 
        }
328
 
        &#x2F;&#x2F;Add the node to this list
329
 
        e.drop.get(&#x27;node&#x27;).get(&#x27;parentNode&#x27;).insertBefore(drag, drop);
330
 
        &#x2F;&#x2F;Resize this nodes shim, so we can drop on it later.
331
 
        e.drop.sizeShim();
332
 
    }
333
 
});</pre>
334
 
 
335
 
 
336
 
<h3 id="drop-hit-event">Drop Hit Event</h3>
337
 
<p>In this event, we check to see if the target that was dropped on was not an LI node. If it wasn't, then we know it was dropped on the empty space of the UL.</p>
338
 
 
339
 
<pre class="code prettyprint">Y.DD.DDM.on(&#x27;drag:drophit&#x27;, function(e) {
340
 
    var drop = e.drop.get(&#x27;node&#x27;),
341
 
        drag = e.drag.get(&#x27;node&#x27;);
342
 
 
343
 
    &#x2F;&#x2F;if we are not on an li, we must have been dropped on a ul
344
 
    if (drop.get(&#x27;tagName&#x27;).toLowerCase() !== &#x27;li&#x27;) {
345
 
        if (!drop.contains(drag)) {
346
 
            drop.appendChild(drag);
347
 
        }
348
 
    }
349
 
});</pre>
350
 
 
351
 
 
352
 
<h3 id="full-javascript-source">Full Javascript Source</h3>
353
 
<pre class="code prettyprint">YUI().use(&#x27;dd-constrain&#x27;, &#x27;dd-proxy&#x27;, &#x27;dd-drop&#x27;, function(Y) {
354
 
    &#x2F;&#x2F;Listen for all drop:over events
355
 
    Y.DD.DDM.on(&#x27;drop:over&#x27;, function(e) {
356
 
        &#x2F;&#x2F;Get a reference to our drag and drop nodes
357
 
        var drag = e.drag.get(&#x27;node&#x27;),
358
 
            drop = e.drop.get(&#x27;node&#x27;);
359
 
        
360
 
        &#x2F;&#x2F;Are we dropping on a li node?
361
 
        if (drop.get(&#x27;tagName&#x27;).toLowerCase() === &#x27;li&#x27;) {
362
 
            &#x2F;&#x2F;Are we not going up?
363
 
            if (!goingUp) {
364
 
                drop = drop.get(&#x27;nextSibling&#x27;);
365
 
            }
366
 
            &#x2F;&#x2F;Add the node to this list
367
 
            e.drop.get(&#x27;node&#x27;).get(&#x27;parentNode&#x27;).insertBefore(drag, drop);
368
 
            &#x2F;&#x2F;Resize this nodes shim, so we can drop on it later.
369
 
            e.drop.sizeShim();
370
 
        }
371
 
    });
372
 
    &#x2F;&#x2F;Listen for all drag:drag events
373
 
    Y.DD.DDM.on(&#x27;drag:drag&#x27;, function(e) {
374
 
        &#x2F;&#x2F;Get the last y point
375
 
        var y = e.target.lastXY[1];
376
 
        &#x2F;&#x2F;is it greater than the lastY var?
377
 
        if (y &lt; lastY) {
378
 
            &#x2F;&#x2F;We are going up
379
 
            goingUp = true;
380
 
        } else {
381
 
            &#x2F;&#x2F;We are going down.
382
 
            goingUp = false;
383
 
        }
384
 
        &#x2F;&#x2F;Cache for next check
385
 
        lastY = y;
386
 
    });
387
 
    &#x2F;&#x2F;Listen for all drag:start events
388
 
    Y.DD.DDM.on(&#x27;drag:start&#x27;, function(e) {
389
 
        &#x2F;&#x2F;Get our drag object
390
 
        var drag = e.target;
391
 
        &#x2F;&#x2F;Set some styles here
392
 
        drag.get(&#x27;node&#x27;).setStyle(&#x27;opacity&#x27;, &#x27;.25&#x27;);
393
 
        drag.get(&#x27;dragNode&#x27;).set(&#x27;innerHTML&#x27;, drag.get(&#x27;node&#x27;).get(&#x27;innerHTML&#x27;));
394
 
        drag.get(&#x27;dragNode&#x27;).setStyles({
395
 
            opacity: &#x27;.5&#x27;,
396
 
            borderColor: drag.get(&#x27;node&#x27;).getStyle(&#x27;borderColor&#x27;),
397
 
            backgroundColor: drag.get(&#x27;node&#x27;).getStyle(&#x27;backgroundColor&#x27;)
398
 
        });
399
 
    });
400
 
    &#x2F;&#x2F;Listen for a drag:end events
401
 
    Y.DD.DDM.on(&#x27;drag:end&#x27;, function(e) {
402
 
        var drag = e.target;
403
 
        &#x2F;&#x2F;Put our styles back
404
 
        drag.get(&#x27;node&#x27;).setStyles({
405
 
            visibility: &#x27;&#x27;,
406
 
            opacity: &#x27;1&#x27;
407
 
        });
408
 
    });
409
 
    &#x2F;&#x2F;Listen for all drag:drophit events
410
 
    Y.DD.DDM.on(&#x27;drag:drophit&#x27;, function(e) {
411
 
        var drop = e.drop.get(&#x27;node&#x27;),
412
 
            drag = e.drag.get(&#x27;node&#x27;);
413
 
 
414
 
        &#x2F;&#x2F;if we are not on an li, we must have been dropped on a ul
415
 
        if (drop.get(&#x27;tagName&#x27;).toLowerCase() !== &#x27;li&#x27;) {
416
 
            if (!drop.contains(drag)) {
417
 
                drop.appendChild(drag);
418
 
            }
419
 
        }
420
 
    });
421
 
    
422
 
    &#x2F;&#x2F;Static Vars
423
 
    var goingUp = false, lastY = 0;
424
 
 
425
 
    &#x2F;&#x2F;Get the list of li&#x27;s in the lists and make them draggable
426
 
    var lis = Y.Node.all(&#x27;#play ul li&#x27;);
427
 
    lis.each(function(v, k) {
428
 
        var dd = new Y.DD.Drag({
429
 
            node: v,
430
 
            target: {
431
 
                padding: &#x27;0 0 0 20&#x27;
432
 
            }
433
 
        }).plug(Y.Plugin.DDProxy, {
434
 
            moveOnEnd: false
435
 
        }).plug(Y.Plugin.DDConstrained, {
436
 
            constrain2node: &#x27;#play&#x27;
437
 
        });
438
 
    });
439
 
 
440
 
    &#x2F;&#x2F;Create simple targets for the 2 lists.
441
 
    var uls = Y.Node.all(&#x27;#play ul&#x27;);
442
 
    uls.each(function(v, k) {
443
 
        var tar = new Y.DD.Drop({
444
 
            node: v
445
 
        });
446
 
    });
447
 
    
448
 
});</pre>
449
 
 
450
 
</div>
451
 
        </div>
452
 
 
453
 
        <div id="sidebar" class="yui3-u">
454
 
            
455
 
                <div id="toc" class="sidebox">
456
 
                    <div class="hd">
457
 
                        <h2 class="no-toc">Table of Contents</h2>
458
 
                    </div>
459
 
 
460
 
                    <div class="bd">
461
 
                        <ul class="toc">
462
 
<li>
463
 
<a href="#setting-up-the-lists">Setting up the lists</a>
464
 
</li>
465
 
<li>
466
 
<a href="#setting-up-the-yui-instance">Setting up the YUI Instance</a>
467
 
</li>
468
 
<li>
469
 
<a href="#making-the-nodes-drag-instances-and-drop-targets">Making the Nodes Drag Instances and Drop Targets</a>
470
 
</li>
471
 
<li>
472
 
<a href="#making-the-list-drop-targets-too">Making the List Drop Targets too</a>
473
 
</li>
474
 
<li>
475
 
<a href="#using-event-bubbling">Using Event Bubbling</a>
476
 
</li>
477
 
<li>
478
 
<a href="#start-drag-event">Start Drag Event</a>
479
 
</li>
480
 
<li>
481
 
<a href="#end-drag-event">End Drag Event</a>
482
 
</li>
483
 
<li>
484
 
<a href="#drag-event">Drag Event</a>
485
 
</li>
486
 
<li>
487
 
<a href="#over-drop-event">Over Drop Event</a>
488
 
</li>
489
 
<li>
490
 
<a href="#drop-hit-event">Drop Hit Event</a>
491
 
</li>
492
 
<li>
493
 
<a href="#full-javascript-source">Full Javascript Source</a>
494
 
</li>
495
 
</ul>
496
 
                    </div>
497
 
                </div>
498
 
            
499
 
 
500
 
            
501
 
                <div class="sidebox">
502
 
                    <div class="hd">
503
 
                        <h2 class="no-toc">Examples</h2>
504
 
                    </div>
505
 
 
506
 
                    <div class="bd">
507
 
                        <ul class="examples">
508
 
                            
509
 
                                
510
 
                                    <li data-description="A simple drag interaction that doesn&#x27;t require a drop interaction.">
511
 
                                        <a href="simple-drag.html">Simple Drag</a>
512
 
                                    </li>
513
 
                                
514
 
                            
515
 
                                
516
 
                                    <li data-description="How to apply the Drag Plugin to a node.">
517
 
                                        <a href="drag-plugin.html">Drag - Node plugin</a>
518
 
                                    </li>
519
 
                                
520
 
                            
521
 
                                
522
 
                                    <li data-description="A simple proxy drag interaction that doesn&#x27;t require a drop interaction.">
523
 
                                        <a href="proxy-drag.html">Drag - Proxy</a>
524
 
                                    </li>
525
 
                                
526
 
                            
527
 
                                
528
 
                                    <li data-description="How to constrain a draggable Node to another Node&#x27;s region.">
529
 
                                        <a href="constrained-drag.html">Drag - Constrained to a Region</a>
530
 
                                    </li>
531
 
                                
532
 
                            
533
 
                                
534
 
                                    <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.">
535
 
                                        <a href="groups-drag.html">Drag - Interaction Groups</a>
536
 
                                    </li>
537
 
                                
538
 
                            
539
 
                                
540
 
                                    <li data-description="The use of the drag shim when dragging nodes over other troublesome nodes.">
541
 
                                        <a href="shim-drag.html">Using the Drag Shim</a>
542
 
                                    </li>
543
 
                                
544
 
                            
545
 
                                
546
 
                                    <li data-description="How to use the Drop Target events to code your application.">
547
 
                                        <a href="drop-code.html">Using Drop Based Coding</a>
548
 
                                    </li>
549
 
                                
550
 
                            
551
 
                                
552
 
                                    <li data-description="How you can use the DD Scroll plugin to scroll the browser window as you drag.">
553
 
                                        <a href="winscroll.html">Window Scrolling</a>
554
 
                                    </li>
555
 
                                
556
 
                            
557
 
                                
558
 
                                    <li data-description="How to use DD.Delegate to create a scalable solution which supports multiple draggable items.">
559
 
                                        <a href="delegate.html">Drag Delegation</a>
560
 
                                    </li>
561
 
                                
562
 
                            
563
 
                                
564
 
                                    <li data-description="Using DD.Delegate to support dragging multiple items and dropping them onto a Drop Target.">
565
 
                                        <a href="delegate-drop.html">Drag Delegation with a Drop Target</a>
566
 
                                    </li>
567
 
                                
568
 
                            
569
 
                                
570
 
                                    <li data-description="How to use Drag plugins with a DD Delegate based solution.">
571
 
                                        <a href="delegate-plugins.html">Using Drag Plugins with Delegate</a>
572
 
                                    </li>
573
 
                                
574
 
                            
575
 
                                
576
 
                                    <li data-description="This example shows how to make a sortable list using Custom Event Bubbling.">
577
 
                                        <a href="list-drag.html">List Reorder w/Bubbling</a>
578
 
                                    </li>
579
 
                                
580
 
                            
581
 
                                
582
 
                                    <li data-description="This example shows how to make a sortable list using Custom Event Bubbling and Node Scrolling.">
583
 
                                        <a href="scroll-list.html">List Reorder w/Scrolling</a>
584
 
                                    </li>
585
 
                                
586
 
                            
587
 
                                
588
 
                                    <li data-description="How to make an animated node a Drop target.">
589
 
                                        <a href="anim-drop.html">Animated Drop Targets</a>
590
 
                                    </li>
591
 
                                
592
 
                            
593
 
                                
594
 
                                    <li data-description="Example Photo Browser application.">
595
 
                                        <a href="photo-browser.html">Photo Browser</a>
596
 
                                    </li>
597
 
                                
598
 
                            
599
 
                                
600
 
                                    <li data-description="Portal style example using Drag &amp; Drop Event Bubbling and Animation.">
601
 
                                        <a href="portal-drag.html">Portal Style Example</a>
602
 
                                    </li>
603
 
                                
604
 
                            
605
 
                                
606
 
                            
607
 
                                
608
 
                            
609
 
                        </ul>
610
 
                    </div>
611
 
                </div>
612
 
            
613
 
 
614
 
            
615
 
                <div class="sidebox">
616
 
                    <div class="hd">
617
 
                        <h2 class="no-toc">Examples That Use This Component</h2>
618
 
                    </div>
619
 
 
620
 
                    <div class="bd">
621
 
                        <ul class="examples">
622
 
                            
623
 
                                
624
 
                            
625
 
                                
626
 
                            
627
 
                                
628
 
                            
629
 
                                
630
 
                            
631
 
                                
632
 
                            
633
 
                                
634
 
                            
635
 
                                
636
 
                            
637
 
                                
638
 
                            
639
 
                                
640
 
                            
641
 
                                
642
 
                            
643
 
                                
644
 
                            
645
 
                                
646
 
                            
647
 
                                
648
 
                            
649
 
                                
650
 
                            
651
 
                                
652
 
                            
653
 
                                
654
 
                            
655
 
                                
656
 
                                    <li data-description="Working with multiple YUI instances.">
657
 
                                        <a href="../yui/yui-multi.html">Multiple Instances</a>
658
 
                                    </li>
659
 
                                
660
 
                            
661
 
                                
662
 
                                    <li data-description="Use StyleSheet to adjust the CSS rules applying a page theme from user input">
663
 
                                        <a href="../stylesheet/stylesheet-theme.html">Adjusting a Page Theme on the Fly</a>
664
 
                                    </li>
665
 
                                
666
 
                            
667
 
                        </ul>
668
 
                    </div>
669
 
                </div>
670
 
            
671
 
        </div>
672
 
    </div>
673
 
</div>
674
 
 
675
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
676
 
<script>prettyPrint();</script>
677
 
 
678
 
</body>
679
 
</html>