425N/A<div class="intro">

425N/A<p>This example will show you how to make an animated node a Drop target.</p>

425N/A</div>

425N/A

911N/A<div class="example newwindow">

761N/A <a href="anim-drop-example.html" target="_blank" class="button">

425N/A View Example in New Window

425N/A </a>

919N/A</div>

919N/A

919N/A

919N/A

919N/A<h3>Setting up the HTML</h3>

919N/A<p>First we will create our HTML.</p>

919N/A

919N/A```

919N/A {{>anim-drop-source-html}}

919N/A```

919N/A

919N/A<p>Now we give that HTML some CSS to make it visible.</p>

919N/A

919N/A```

919N/A {{>anim-drop-source-css}}

919N/A```

919N/A

425N/A<h3>Setting up the YUI Instance</h3>

425N/A<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>

425N/A

425N/A```

493N/AYUI().use('dd-drop', 'anim', 'dd-plugin', 'dd-drop-plugin');

425N/A```

425N/A

761N/A<h3>Making the Node draggable</h3>

425N/A<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>

911N/A<p>In this example we will be using Node plugins to accomplish our tasks.</p>

911N/A

911N/A```

911N/AYUI().use('dd-drop', 'anim', 'dd-plugin', 'dd-drop-plugin', function(Y) {

425N/A //Get the node #drag

425N/A var d = Y.one('#drag');

425N/A d.plug(Y.Plugin.Drag, { dragMode: 'intersect' });

425N/A});

493N/A```

425N/A

425N/A<h3>Animating the Nodes</h3>

425N/A<p>Now we will set up the Animation sequence that we want to run.</p>

425N/A

425N/A```

425N/A //Get all the div's with the class anim

425N/A var anims = Y.Node.all('div.anim');

493N/A var counter = 0;

425N/A anims.each(function(v, k, items) {

425N/A //Get a reference to the Node instance

425N/A var a = v;

493N/A counter++;

425N/A //Add the FX plugin

425N/A a.plug(Y.Plugin.NodeFX);

425N/A //Add the Drop plugin

425N/A a.plug(Y.Plugin.Drop);

425N/A

//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)

});

});

```

<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

a.plug(Y.Plugin.NodeFX);

//Add the Drop plugin

a.plug(Y.Plugin.Drop);

```

<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

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);

```

<h3>Full example source</h3>

```

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

```