5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<div class="intro">
aed0a1e5e3f44c4b7d2afd9e1c7dc78203e11251Dav Glass<p>This example shows how to use the Drop Target events to code your application.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<div class="example">
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass {{>drop-code-source}}
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h3>Setting up the HTML</h3>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>First we need to create the HTML for the example.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass{{>drop-code-source-html}}
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>Now we give the HTML some CSS to make them visible.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass{{>drop-code-source-css}}
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h3>Setting up the YUI Instance</h3>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<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>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav GlassYUI().use('dd-drop', 'dd-constrain');
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h3>Making the Nodes draggable</h3>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<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>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>In this example we are using the data config option of the drag to associate data with this Drag instance.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>So we have set up an object literal containing information about our drag items.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass var data = {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass 'drag1': { color: 'white', size: 'x-small', price: '$5.00' },
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass 'drag2': { color: 'blue', size: 'small', price: '$6.00' },
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass 'drag3': { color: 'green', size: 'medium', price: '$7.00' },
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass 'drag4': { color: 'red', size: 'large', price: '$10.00' },
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass 'drag5': { color: 'purple', size: 'x-large', price: '$15.00' }
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>Now we walk through the nodes and create a drag instance from each of them.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav GlassYUI().use('dd-drop', 'dd-constrain', function(Y) {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass //Data to attach to each drag object
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass var data = {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass 'drag1': { color: 'white', size: 'x-small', price: '$5.00' },
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass 'drag2': { color: 'blue', size: 'small', price: '$6.00' },
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass 'drag3': { color: 'green', size: 'medium', price: '$7.00' },
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass 'drag4': { color: 'red', size: 'large', price: '$10.00' },
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass 'drag5': { color: 'purple', size: 'x-large', price: '$15.00' }
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass //Get all the divs with the class drag
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass //Walk through each one
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass drags.each(function(v, k) {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass //scope a local var for the data
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass var thisData = {};
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass //Using Y.mix to break this data from the data above
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass //Create the new Drag Instance
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass var dd = new Y.DD.Drag({
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass //Give it the node
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass //Set the dragMode to intersect
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass dragMode: 'intersect',
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass //Attach the data here.
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass data: thisData
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass //Keep it inside the work area
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass constrain2node: '#play'
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass //Prevent the default end event (this moves the node back to its start position)
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass dd.on('drag:end', function(e) {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h3>Setting up the Drop Target</h3>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>Here we set up the Drop Target and assign a listener to it.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glassvar drop = new Y.DD.Drop({
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass node: '#drop'
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass//Listen for a drop:hit on this target
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glassdrop.on('drop:hit', function(e) {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass //Now we get the drag instance that triggered the drop hit
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass //get the data from it
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass var data = drag.get('data');
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass //Do something with the data
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass var out = ['id: ' + drag.get('node').get('id')];
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass Y.each(data, function(v, k) {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass out[out.length] = k + ': ' + v;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass var str = '<p><strong>Dropped</strong>: ' + out.join(', ') + '</p>';
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass this.get('node').set('innerHTML', str);
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h3>Full Example Source</h3>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass{{>drop-code-source-js}}