YUI Library Examples: Drag & Drop: Drop Based Coding

+ +

Drag & Drop: Drop Based Coding

+ + + +

Setting up the HTML

First we need to create the HTML for the example.

+ +

Now we give the HTML some CSS to make them visible.

+ + +

Setting up the YUI Instance

Now we need to create our YUI instance and tell it to load the dd-drop and dd-constrain modules.

+ + +

Making the Nodes draggable

Now that we have a YUI instance with the dd-drop module, we need to instantiate the Drag instance on each Drag Node.

In this example we are using the data config option of the drag to associate data with this Drag instance.

So we have set up an object literal containing information about our drag items.

+ +

Now we walk through the nodes and create a drag instance from each of them.

+YUI().use('dd-drop', 'dd-constrain', function(Y) {
+    //Data to attach to each drag object
+    var data = {
+        'drag1': { color: 'white', size: 'x-small', price: '$5.00' },
+        'drag2': { color: 'blue', size: 'small', price: '$6.00' },
+        'drag3': { color: 'green', size: 'medium', price: '$7.00' },
+        'drag4': { color: 'red', size: 'large', price: '$10.00' },
+        'drag5': { color: 'purple', size: 'x-large', price: '$15.00' }
+    };
+    //Get all the divs with the class drag
+    var drags = Y.Node.all('#play div.drag');
+    //Walk through each one
+    drags.each(function(v, k) {
+        //scope a local var for the data
+        var thisData = {};
+        //Using Y.mix to break this data from the data above
+        Y.mix(thisData, data[v.get('id')]);
+
+        //Create the new Drag Instance
+        var dd = new Y.DD.Drag({
+            //Give it the node
+            node: v,
+            //Keep it inside the work area
+            constrain2node: '#play',
+            //Set the dragMode to intersect
+            dragMode: 'intersect',
+            //Attach the data here..
+            data: thisData
+        });
+        //Prevent the default end event (this moves the node back to it's start position)
+        dd.on('drag:end', function(e) {
+            e.preventDefault();
+        });
+    });
+});
+

+ + +

Setting up the Drop Target

Here we set up the Drop Target and assign a listener to it.

+ + +

Full Example Source

+YUI().use('dd-drop', 'dd-constrain', function(Y) {
+    var data = {
+        'drag1': { color: 'white', size: 'x-small', price: '$5.00' },
+        'drag2': { color: 'blue', size: 'small', price: '$6.00' },
+        'drag3': { color: 'green', size: 'medium', price: '$7.00' },
+        'drag4': { color: 'red', size: 'large', price: '$10.00' },
+        'drag5': { color: 'purple', size: 'x-large', price: '$15.00' }
+    };
+    var drags = Y.Node.all('#play div.drag');
+    drags.each(function(v, k, items) {
+        var thisData = {};
+        Y.mix(thisData, data[v.get('id')]);
+        var dd = new Y.DD.Drag({
+            node: items.item(k),
+            constrain2node: '#play',
+            dragMode: 'intersect',
+            data: thisData
+        });
+        //Prevent the default end event (this moves the node back to it's start position)
+        dd.on('drag:end', function(e) {
+            e.preventDefault();
+        });
+    });
+
+    var drop = new Y.DD.Drop({
+        node: '#drop'
+    });
+    drop.on('drop:hit', function(e) {
+        var drag = e.drag;
+        var data = drag.get('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);
+    });
+});
+

YUI Library Examples: Drag & Drop: Drop Based Coding

Drag & Drop: Drop Based Coding

Setting up the HTML

Setting up the YUI Instance

Making the Nodes draggable

Setting up the Drop Target

Full Example Source

+ Drag & Drop Examples:

More Drag & Drop Resources: