c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass<div class="intro">

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass<p>This example will show you how to make an animated node a Drop target.</p>

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass</div>

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass<div class="example newwindow">

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass <a href="anim-drop-example.html" target="_blank" class="button">

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass View Example in New Window

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass </a>

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass</div>

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass<h3>Setting up the HTML</h3>

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass<p>First we will create our HTML.</p>

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass```

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass {{>anim-drop-source-html}}

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass```

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass<p>Now we give that HTML some CSS to make it visible.</p>

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass```

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass {{>anim-drop-source-css}}

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass```

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass<h3>Setting up the YUI Instance</h3>

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass<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>

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass```

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav GlassYUI().use('dd-drop', 'anim', 'dd-plugin', 'dd-drop-plugin');

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass```

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass<h3>Making the Node draggable</h3>

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass<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>

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass<p>In this example we will be using Node plugins to accomplish our tasks.</p>

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass```

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav GlassYUI().use('dd-drop', 'anim', 'dd-plugin', 'dd-drop-plugin', function(Y) {

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass //Get the node #drag

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass var d = Y.one('#drag');

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass d.plug(Y.Plugin.Drag, { dragMode: 'intersect' });

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass});

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass```

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass<h3>Animating the Nodes</h3>

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass<p>Now we will set up the Animation sequence that we want to run.</p>

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass```

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass //Get all the div's with the class anim

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass var anims = Y.Node.all('div.anim');

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass var counter = 0;

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass anims.each(function(v, k, items) {

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass //Get a reference to the Node instance

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass var a = v;

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass counter++;

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass //Add the FX plugin

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass a.plug(Y.Plugin.NodeFX);

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass //Add the Drop plugin

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass a.plug(Y.Plugin.Drop);

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass //Set the attributes on the animation

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass a.fx.setAttrs({

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass from: {

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass left: 0

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass },

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass to: {

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass curve: function() {

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass var points = [],

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass n = 10;

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass for (var i = 0; i < n; ++i) {

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass points.push([

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass Math.floor(Math.random()*Y.DOM.winWidth() - 60 - a.get('offsetWidth')),

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass Math.floor(Math.random()*Y.DOM.winHeight() - a.get('offsetHeight'))

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass ]);

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass }

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass return points;

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass }

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass },

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass //Do the animation 20 times

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass iterations: 20,

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass //Alternate it so it "bounces" across the screen

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass direction: 'alternate',

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass //Give all of them a different duration so we get different speeds.

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass duration: ((counter * 1.75) + 1)

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass });

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass });

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass```

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass<h3>Making the Node a Target</h3>

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass<p>Using the <code>dd-drop-plugin</code>, we now need to make this animated Node a Drop Target.</p>

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass<p>To do that, we need to add the plugin after the fx plugin.</p>

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass```

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass//Add the FX plugin

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glassa.plug(Y.Plugin.NodeFX);

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass//Add the Drop plugin

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glassa.plug(Y.Plugin.Drop);

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass```

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass<h3>Syncing the Target with the Animation</h3>

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass<p>The Drop Target needs to be in sync with the animation, since we are changing the height, width, top and left style.</p>

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass<p>We do this by adding a listener to the <code>tween</code> event on the animation instance.</p>

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass```

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass//on tween of the original anim, we need to sync the drop's shim.

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glassa.fx.on('tween', function() {

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass //Do we have an active Drag?

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass if (Y.DD.DDM.activeDrag) {

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass //Size this shim

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass this.drop.sizeShim();

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass //Force an over target check since we might not be moving the mouse.

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass Y.Lang.later(0, a, function() {

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass this.drop._handleTargetOver();

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass });

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass }

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass}, a);

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass```

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass<h3>Full example source</h3>

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass```

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass{{>anim-drop-source-js}}

c3573884ddb87405d819f8c70cb7fed1ff8f471eDav Glass```