582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews<div class="intro">

990d0e893f5b70e735cdf990af66e9ec6e91fa78Tinderbox User<p>This example shows how to use the Drop Target events to code your application.</p>

6a42ab64276ff832a47e009be1208f7c7d4da22dAutomatic Updater</div>

6a42ab64276ff832a47e009be1208f7c7d4da22dAutomatic Updater

4a14ce5ba00ab7bc55c99ffdcf59c7a4ab902721Automatic Updater<div class="example">

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews {{>drop-code-source}}

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews</div>

6a42ab64276ff832a47e009be1208f7c7d4da22dAutomatic Updater

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews<h3>Setting up the HTML</h3>

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews<p>First we need to create the HTML for the example.</p>

6a42ab64276ff832a47e009be1208f7c7d4da22dAutomatic Updater

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews```

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews{{>drop-code-source-html}}

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews```

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews<p>Now we give the HTML some CSS to make them visible.</p>

ea94d370123a5892f6c47a97f21d1b28d44bb168Tinderbox User

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews```

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews{{>drop-code-source-css}}

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews```

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews

922312472e2e05ebc64993d465999c5351b83036Automatic Updater<h3>Setting up the YUI Instance</h3>

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews<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>

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews

f9aef05653eeb454c489d5bd2bde6daab774ad4aTinderbox User```

50066670817cdf9e86c832066d73715232b29680Tinderbox UserYUI().use('dd-drop', 'dd-constrain');

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews```

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews<h3>Making the Nodes draggable</h3>

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews<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>

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews<p>In this example we are using the data config option of the drag to associate data with this Drag instance.</p>

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews<p>So we have set up an object literal containing information about our drag items.</p>

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews

f9aef05653eeb454c489d5bd2bde6daab774ad4aTinderbox User```

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews var data = {

50066670817cdf9e86c832066d73715232b29680Tinderbox User 'drag1': { color: 'white', size: 'x-small', price: '$5.00' },

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews 'drag2': { color: 'blue', size: 'small', price: '$6.00' },

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews 'drag3': { color: 'green', size: 'medium', price: '$7.00' },

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews 'drag4': { color: 'red', size: 'large', price: '$10.00' },

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews 'drag5': { color: 'purple', size: 'x-large', price: '$15.00' }

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews };

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews```

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews<p>Now we walk through the nodes and create a drag instance from each of them.</p>

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews```

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark AndrewsYUI().use('dd-drop', 'dd-constrain', function(Y) {

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews //Data to attach to each drag object

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews var data = {

e839bf134fb138920d4833cf05cb8b8906787a8dAutomatic Updater 'drag1': { color: 'white', size: 'x-small', price: '$5.00' },

e839bf134fb138920d4833cf05cb8b8906787a8dAutomatic Updater 'drag2': { color: 'blue', size: 'small', price: '$6.00' },

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews 'drag3': { color: 'green', size: 'medium', price: '$7.00' },

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews 'drag4': { color: 'red', size: 'large', price: '$10.00' },

b6b8f8a0362da8c749021c4b6376cfb96047912bTinderbox User 'drag5': { color: 'purple', size: 'x-large', price: '$15.00' }

922312472e2e05ebc64993d465999c5351b83036Automatic Updater };

b27ce68bae92006e2ad7a9b75602c6385e529c3bAutomatic Updater //Get all the divs with the class drag

922312472e2e05ebc64993d465999c5351b83036Automatic Updater var drags = Y.Node.all('#play div.drag');

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews //Walk through each one

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews drags.each(function(v, k) {

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews //scope a local var for the data

b6b8f8a0362da8c749021c4b6376cfb96047912bTinderbox User var thisData = {};

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews //Using Y.mix to break this data from the data above

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews Y.mix(thisData, data[v.get('id')]);

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews //Create the new Drag Instance

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews var dd = new Y.DD.Drag({

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews //Give it the node

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews node: v,

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews //Set the dragMode to intersect

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews dragMode: 'intersect',

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews //Attach the data here.

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews data: thisData

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews }).plug(Y.Plugin.DDConstrained, {

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews //Keep it inside the work area

0e9e255d1643375056aa9ed7fe2a279713ffae78Automatic Updater constrain2node: '#play'

cd791043c8a6edbcacc2392575a9816d19b8157cTinderbox User });

cd791043c8a6edbcacc2392575a9816d19b8157cTinderbox User //Prevent the default end event (this moves the node back to its start position)

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews dd.on('drag:end', function(e) {

e839bf134fb138920d4833cf05cb8b8906787a8dAutomatic Updater e.preventDefault();

e839bf134fb138920d4833cf05cb8b8906787a8dAutomatic Updater });

e839bf134fb138920d4833cf05cb8b8906787a8dAutomatic Updater });

e839bf134fb138920d4833cf05cb8b8906787a8dAutomatic Updater});

0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater```

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews

0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater<h3>Setting up the Drop Target</h3>

0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater<p>Here we set up the Drop Target and assign a listener to it.</p>

0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater

0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater```

0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updatervar drop = new Y.DD.Drop({

795a316ec568b2470aab18b9481443966047652eAutomatic Updater node: '#drop'

795a316ec568b2470aab18b9481443966047652eAutomatic Updater});

0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater//Listen for a drop:hit on this target

0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updaterdrop.on('drop:hit', function(e) {

0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater //Now we get the drag instance that triggered the drop hit

0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater var drag = e.drag;

795a316ec568b2470aab18b9481443966047652eAutomatic Updater //get the data from it

795a316ec568b2470aab18b9481443966047652eAutomatic Updater var data = drag.get('data');

795a316ec568b2470aab18b9481443966047652eAutomatic Updater

795a316ec568b2470aab18b9481443966047652eAutomatic Updater //Do something with the data

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

795a316ec568b2470aab18b9481443966047652eAutomatic Updater Y.each(data, function(v, k) {

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

795a316ec568b2470aab18b9481443966047652eAutomatic Updater });

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

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

795a316ec568b2470aab18b9481443966047652eAutomatic Updater});

0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater```

0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater

0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater<h3>Full Example Source</h3>

0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater

0a7ed88633a680bb881868b75ded4d09a7bbbc50Automatic Updater```

582f8b9a8d170a80ef67475bddb8ad5cf7cd7cadMark Andrews{{>drop-code-source-js}}

ca67ebfe9eef0b8f04179f7e511a19e0337a5422Automatic Updater```

ca67ebfe9eef0b8f04179f7e511a19e0337a5422Automatic Updater