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

70N/A<p>This example shows how to use the Drop Target events to code your application.</p>

286N/A</div>

70N/A

70N/A<div class="example">

70N/A {{>drop-code-source}}

70N/A</div>

70N/A

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

70N/A<p>First we need to create the HTML for the example.</p>

70N/A

70N/A```

70N/A{{>drop-code-source-html}}

70N/A```

70N/A

70N/A<p>Now we give the HTML some CSS to make them visible.</p>

70N/A

70N/A```

70N/A{{>drop-code-source-css}}

70N/A```

70N/A

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

70N/A<p>Now we need to create our YUI instance and tell it to load the <code>dd-drop</code> and <code>dd-constrain</code> modules.</p>

70N/A

70N/A```

70N/AYUI().use('dd-drop', 'dd-constrain');

70N/A```

70N/A

70N/A<h3>Making the Nodes draggable</h3>

70N/A<p>Now that we have a YUI instance with the <code>dd-drop</code> module, we need to instantiate the <code>Drag</code> instance on each Drag Node.</p>

310N/A<p>In this example we are using the data config option of the drag to associate data with this Drag instance.</p>

70N/A<p>So we have set up an object literal containing information about our drag items.</p>

70N/A

70N/A```

98N/A var data = {

213N/A 'drag1': { color: 'white', size: 'x-small', price: '$5.00' },

304N/A 'drag2': { color: 'blue', size: 'small', price: '$6.00' },

231N/A 'drag3': { color: 'green', size: 'medium', price: '$7.00' },

98N/A 'drag4': { color: 'red', size: 'large', price: '$10.00' },

310N/A 'drag5': { color: 'purple', size: 'x-large', price: '$15.00' }

290N/A };

304N/A```

309N/A

210N/A<p>Now we walk through the nodes and create a drag instance from each of them.</p>

128N/A

70N/A```

294N/AYUI().use('dd-drop', 'dd-constrain', function(Y) {

98N/A //Data to attach to each drag object

277N/A var data = {

289N/A 'drag1': { color: 'white', size: 'x-small', price: '$5.00' },

290N/A 'drag2': { color: 'blue', size: 'small', price: '$6.00' },

286N/A 'drag3': { color: 'green', size: 'medium', price: '$7.00' },

90N/A 'drag4': { color: 'red', size: 'large', price: '$10.00' },

295N/A 'drag5': { color: 'purple', size: 'x-large', price: '$15.00' }

70N/A };

299N/A //Get all the divs with the class drag

262N/A var drags = Y.Node.all('#play div.drag');

277N/A //Walk through each one

280N/A drags.each(function(v, k) {

309N/A //scope a local var for the data

70N/A var thisData = {};

70N/A //Using Y.mix to break this data from the data above

280N/A Y.mix(thisData, data[v.get('id')]);

70N/A

70N/A //Create the new Drag Instance

98N/A var dd = new Y.DD.Drag({

98N/A //Give it the node

231N/A node: v,

98N/A //Set the dragMode to intersect

156N/A dragMode: 'intersect',

156N/A //Attach the data here.

98N/A data: thisData

70N/A }).plug(Y.Plugin.DDConstrained, {

70N/A //Keep it inside the work area

70N/A constrain2node: '#play'

70N/A });

70N/A //Prevent the default end event (this moves the node back to its start position)

70N/A dd.on('drag:end', function(e) {

70N/A e.preventDefault();

70N/A });

70N/A });

70N/A});

70N/A```

70N/A

70N/A<h3>Setting up the Drop Target</h3>

70N/A<p>Here we set up the Drop Target and assign a listener to it.</p>

70N/A

70N/A```

70N/Avar drop = new Y.DD.Drop({

70N/A node: '#drop'

253N/A});

70N/A//Listen for a drop:hit on this target

70N/Adrop.on('drop:hit', function(e) {

//Now we get the drag instance that triggered the drop hit

var drag = e.drag;

//get the data from it

var data = drag.get('data');

//Do something with the data

var out = ['id: ' + drag.get('node').get('id')];

Y.each(data, function(v, k) {

out[out.length] = k + ': ' + v;

});

var str = '<p><strong>Dropped</strong>: ' + out.join(', ') + '</p>';

this.get('node').set('innerHTML', str);

});

```

<h3>Full Example Source</h3>

```

{{>drop-code-source-js}}

```