1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<div class="intro">
<p>This example will show you how to make an animated node a Drop target.</p>
</div>
<div class="example newwindow">
<a href="anim-drop-example.html" target="_blank" class="button">
View Example in New Window
</a>
</div>
<h3>Setting up the HTML</h3>
<p>First we will create our HTML.</p>
```
{{>anim-drop-source-html}}
```
<p>Now we give that HTML some CSS to make it visible.</p>
```
{{>anim-drop-source-css}}
```
<h3>Setting up the YUI Instance</h3>
<p>Now we need to create our YUI instance and tell it to load the <code>dd-drop</code>, <code>dd-plugin</code>, <code>dd-drop-plugin</code> and <code>anim</code> modules.</p>
```
YUI().use('dd-drop', 'anim', 'dd-plugin', 'dd-drop-plugin');
```
<h3>Making the Node draggable</h3>
<p>Now that we have a YUI instance with the modules loaded, we need to instantiate the <code>Drag</code> instance on this Node.</p>
<p>In this example we will be using Node plugins to accomplish our tasks.</p>
```
YUI().use('dd-drop', 'anim', 'dd-plugin', 'dd-drop-plugin', function(Y) {
//Get the node #drag
var d = Y.one('#drag');
d.plug(Y.Plugin.Drag, { dragMode: 'intersect' });
});
```
<h3>Animating the Nodes</h3>
<p>Now we will set up the Animation sequence that we want to run.</p>
```
//Get all the div's with the class anim
var anims = Y.Node.all('div.anim');
var counter = 0;
anims.each(function(v, k, items) {
//Get a reference to the Node instance
var a = v;
counter++;
//Add the FX plugin
//Add the Drop plugin
//Set the attributes on the animation
from: {
left: 0
},
to: {
curve: function() {
var points = [],
n = 10;
for (var i = 0; i < n; ++i) {
]);
}
return points;
}
},
//Do the animation 20 times
iterations: 20,
//Alternate it so it "bounces" across the screen
direction: 'alternate',
//Give all of them a different duration so we get different speeds.
duration: ((counter * 1.75) + 1)
});
});
```
<h3>Making the Node a Target</h3>
<p>Using the <code>dd-drop-plugin</code>, we now need to make this animated Node a Drop Target.</p>
<p>To do that, we need to add the plugin after the fx plugin.</p>
```
//Add the FX plugin
//Add the Drop plugin
```
<h3>Syncing the Target with the Animation</h3>
<p>The Drop Target needs to be in sync with the animation, since we are changing the height, width, top and left style.</p>
<p>We do this by adding a listener to the <code>tween</code> event on the animation instance.</p>
```
//on tween of the original anim, we need to sync the drop's shim.
a.fx.on('tween', function() {
//Do we have an active Drag?
if (Y.DD.DDM.activeDrag) {
//Size this shim
//Force an over target check since we might not be moving the mouse.
Y.Lang.later(0, a, function() {
});
}
}, a);
```
<h3>Full example source</h3>
```
{{>anim-drop-source-js}}
```