YUI Library Examples: Drag & Drop: Animated Drop Targets

+ +

Drag & Drop: Animated Drop Targets

+ + + +

Setting up the HTML

First we will create our HTML.

+ +

Now we give that HTML some CSS to make it visible.

+ + +

Setting up the YUI Instance

Now we need to create our YUI instance and tell it to load the dd-drop, dd-plugin, dd-drop-plugin and anim modules.

+ + +

Making the Node draggable

Now that we have a YUI instance with the modules loaded, we need to instantiate the Drag instance on this Node.

In this example we will be using Node plugins to accomplish our tasks.

+ + +

Animating the Nodes

Now we will setup the Animation sequence that we want to run.

+    //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
+        a.plug(Y.Plugin.NodeFX);
+        //Add the Drop plugin
+        a.plug(Y.Plugin.Drop);
+
+        //Set the attributes on the animation
+        a.fx.setAttrs({
+            from: {
+                left: 0
+            },
+            to: {
+                curve: function() {
+                    var points = [],
+                        n = 10;
+
+                    for (var i = 0; i < n; ++i) {
+                        points.push([
+                            Math.floor(Math.random()*Y.DOM.winWidth() - 60 - a.get('offsetWidth')),
+                            Math.floor(Math.random()*Y.DOM.winHeight() - a.get('offsetHeight'))
+                        ]);
+                    }
+                    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)
+        });
+    });
+

+ +

Making the Node A Target

Using the dd-drop-plugin, we now need to make this animated Node a Drop Target.

To do that, we need to add the plugin after the fx plugin.

+ + +

Syncing the Target with the Animation

The Drop Target needs to be in sync with the animation, since we are changing the height, width, top and left style.

We do this by adding a listener to the tween event on the animation instance.

+ + +

Full example source

+YUI().use('dd-drop', 'anim', 'dd-plugin', 'dd-drop-plugin', function(Y) {
+    //Get the node #drag
+    var d = Y.Node.get('#drag');
+    d.plug(Y.plugin.Drag, { dragMode: 'intersect' });
+    
+    //Get all the div's with the class anim
+    var anims = Y.Node.all('div.anim');
+    var counter = 0;
+    anims.each(function(v, k) {
+        //Get a reference to the Node instance
+        var a = v; 
+        //Add the FX plugin
+        a.plug(Y.Plugin.NodeFX);
+        //Add the Drop plugin
+        a.plug(Y.Plugin.Drop);
+
+        //Set the attributes on the animation
+        a.fx.setAttrs({
+            from: {
+                left: 0
+            },
+            to: {
+                curve: function() {
+                    var points = [],
+                        n = 10;
+
+                    for (var i = 0; i < n; ++i) {
+                        points.push([
+                            Math.floor(Math.random()*Y.DOM.winWidth() - 60 - a.get('offsetWidth')),
+                            Math.floor(Math.random()*Y.DOM.winHeight() - a.get('offsetHeight'))
+                        ]);
+                    }
+                    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)
+        });
+
+        //When this drop is entered, pause the fx
+        a.drop.on('drop:enter', function() {
+            this.fx.pause();
+        }, a);
+        //When the drop is exited, run the fx again
+        a.drop.on('drop:exit', function() {
+            this.fx.run();
+        }, a);
+        //When a drop is on the node, do something special
+        a.drop.on('drop:hit', function(e) {
+            //Stop the animation
+            this.fx.stop();
+            //remove the tween listener
+            this.fx.unsubscribeAll('tween');
+            //move it to the dock
+            this.fx.setAttrs({
+                from: {
+                    opacity: 1
+                },
+                to: {
+                    height: 50,
+                    width: 50,
+                    left: function() {
+                        var dW = Y.Node.get('body').get('viewportRegion').right;
+                        return ((dW - 60)); //Minus 60 for the dock
+                    },
+                    top: 15,
+                    opacity: .5
+                },
+                direction: 'normal',
+                iterations: 1,
+                duration: .5,
+                //We are using reverse above for the "bouncing", reset it here.
+                reverse: false
+            });
+
+            //On end, add a class and destroy the target
+            this.fx.on('end', function() {
+                this.drop.get('node').addClass('done');
+                this.drop.destroy();
+            }, this);
+            //Run this animation
+            this.fx.run();
+            
+            //others that were dropped on.
+            Y.each(e.others, function(v, k) {
+                var node = v.get('node');
+                node.fx.run();
+            });
+
+        }, a);
+        
+        //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
+                this.drop.sizeShim();
+                //Force an over target check since we might not be moving the mouse.
+                Y.Lang.later(0, a, function() {
+                    this.drop._handleTargetOver();
+                });
+            }
+        }, a);
+
+        a.fx.run();
+    });
+});
+

+ +

YUI Library Examples: Drag & Drop: Animated Drop Targets

Drag & Drop: Animated Drop Targets

Setting up the HTML

Setting up the YUI Instance

Making the Node draggable

Animating the Nodes

Making the Node A Target

Syncing the Target with the Animation

Full example source

+ Drag & Drop Examples:

More Drag & Drop Resources: