|
1 |
|
2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
3 <html> |
|
4 <head> |
|
5 <meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
6 <title>Animated Drop Targets</title> |
|
7 <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css"> |
|
8 |
|
9 <script type="text/javascript" src="../../build/yui/yui-min.js"></script> |
|
10 <style type="text/css" media="screen"> |
|
11 p, h2 { |
|
12 margin: 1em; |
|
13 } |
|
14 body { |
|
15 text-align: left; |
|
16 } |
|
17 .anim { |
|
18 position: relative; |
|
19 height: 50px; |
|
20 width: 100px; |
|
21 border: 1px solid black; |
|
22 background-color: #00B8BF; |
|
23 top: 100px; |
|
24 } |
|
25 #drag { |
|
26 height: 50px; |
|
27 width: 50px; |
|
28 border: 1px solid black; |
|
29 background-color: #004C6D; |
|
30 color: white; |
|
31 cursor: move; |
|
32 z-index: 5; |
|
33 } |
|
34 #dock { |
|
35 height: 600px; |
|
36 width: 75px; |
|
37 background-color: #D00050; |
|
38 border: 1px solid black; |
|
39 position: absolute; |
|
40 top: 5px; |
|
41 right: 0px; |
|
42 |
|
43 } |
|
44 .anim.yui-dd-drop-over { |
|
45 background-color: #EDFF9F; |
|
46 } |
|
47 .anim.done { |
|
48 background-color: white; |
|
49 } |
|
50 #drag1.yui-dd-drag-over { |
|
51 opacity: .5; |
|
52 filter: alpha(opacity=50); |
|
53 } |
|
54 </style> |
|
55 |
|
56 <body class="yui-reset yui-fonts"> |
|
57 <div id="dock"></div> |
|
58 <div id="drag">Drag #1</div> |
|
59 <div id="anim1" class="anim">Anim #1</div> |
|
60 <div id="anim2" class="anim">Anim #2</div> |
|
61 <div id="anim3" class="anim">Anim #3</div> |
|
62 <div id="anim4" class="anim">Anim #4</div> |
|
63 <div id="anim5" class="anim">Anim #5</div> |
|
64 |
|
65 <script type="text/javascript"> |
|
66 YUI({base:"../../build/", timeout: 10000}).use('dd', 'anim', function(Y) { |
|
67 //Get the node #drag |
|
68 var d = Y.Node.get('#drag'); |
|
69 d.plug(Y.Plugin.Drag, { dragMode: 'intersect' }); |
|
70 |
|
71 //Get all the div's with the class anim |
|
72 var anims = Y.Node.all('div.anim'); |
|
73 var counter = 0; |
|
74 anims.each(function(v, k) { |
|
75 //Get a reference to the Node instance |
|
76 var a = v; |
|
77 counter++; |
|
78 //Add the FX plugin |
|
79 a.plug(Y.Plugin.NodeFX); |
|
80 //Add the Drop plugin |
|
81 a.plug(Y.Plugin.Drop); |
|
82 |
|
83 //Set the attributes on the animation |
|
84 a.fx.setAttrs({ |
|
85 from: { |
|
86 left: 0 |
|
87 }, |
|
88 to: { |
|
89 curve: function() { |
|
90 var points = [], |
|
91 n = 10; |
|
92 |
|
93 for (var i = 0; i < n; ++i) { |
|
94 points.push([ |
|
95 Math.floor(Math.random()*Y.DOM.winWidth() - 60 - a.get('offsetWidth')), |
|
96 Math.floor(Math.random()*Y.DOM.winHeight() - a.get('offsetHeight')) |
|
97 ]); |
|
98 } |
|
99 return points; |
|
100 } |
|
101 }, |
|
102 //Do the animation 20 times |
|
103 iterations: 20, |
|
104 //Alternate it so it "bounces" across the screen |
|
105 direction: 'alternate', |
|
106 //Give all of them a different duration so we get different speeds. |
|
107 duration: ((counter * 1.75) + 1) |
|
108 }); |
|
109 |
|
110 //When this drop is entered, pause the fx |
|
111 a.drop.on('drop:enter', function() { |
|
112 this.fx.pause(); |
|
113 }, a); |
|
114 //When the drop is exited, run the fx again |
|
115 a.drop.on('drop:exit', function() { |
|
116 this.fx.run(); |
|
117 }, a); |
|
118 //When a drop is on the node, do something special |
|
119 a.drop.on('drop:hit', function(e) { |
|
120 //Stop the animation |
|
121 this.fx.stop(); |
|
122 //remove the tween listener |
|
123 this.fx.unsubscribeAll('tween'); |
|
124 //move it to the dock |
|
125 this.fx.setAttrs({ |
|
126 from: { |
|
127 opacity: 1 |
|
128 }, |
|
129 to: { |
|
130 height: 50, |
|
131 width: 50, |
|
132 left: function() { |
|
133 var dW = Y.Node.get('body').get('viewportRegion').right; |
|
134 return ((dW - 60)); //Minus 60 for the dock |
|
135 }, |
|
136 top: 15, |
|
137 opacity: .5 |
|
138 }, |
|
139 direction: 'normal', |
|
140 iterations: 1, |
|
141 duration: .5, |
|
142 //We are using reverse above for the "bouncing", reset it here. |
|
143 reverse: false |
|
144 }); |
|
145 |
|
146 //On end, add a class and destroy the target |
|
147 this.fx.on('end', function() { |
|
148 this.drop.get('node').addClass('done'); |
|
149 this.drop.destroy(); |
|
150 }, this); |
|
151 //Run this animation |
|
152 this.fx.run(); |
|
153 |
|
154 //others that were dropped on. |
|
155 Y.each(e.others, function(v, k) { |
|
156 var node = v.get('node'); |
|
157 node.fx.run(); |
|
158 }); |
|
159 |
|
160 }, a); |
|
161 |
|
162 //on tween of the original anim, we need to sync the drop's shim. |
|
163 a.fx.on('tween', function() { |
|
164 //Do we have an active Drag? |
|
165 if (Y.DD.DDM.activeDrag) { |
|
166 //Size this shim |
|
167 this.drop.sizeShim(); |
|
168 //Force an over target check since we might not be moving the mouse. |
|
169 Y.Lang.later(0, a, function() { |
|
170 this.drop._handleTargetOver(); |
|
171 }); |
|
172 } |
|
173 }, a); |
|
174 |
|
175 a.fx.run(); |
|
176 }); |
|
177 }); |
|
178 |
|
179 </script> |
|
180 |
|
181 |
|
182 </body> |
|
183 </html> |
|
184 |