YUI 3.x Home -

YUI Library Examples: Drag & Drop: Drop Based Coding

Drag & Drop: Drop Based Coding

This example shows how to use the Drop Target events to code your application.

View example in new window.

Drag #1
Drag #2
Drag #3
Drag #4
Drag #5

Setting up the HTML

First we need to create the HTML for the example.

  1. <div id="play">
  2.     <div id="drag1" class="drag">Drag #1</div>
  3.     <div id="drag2" class="drag">Drag #2</div>
  4.     <div id="drag3" class="drag">Drag #3</div>
  5.     <div id="drag4" class="drag">Drag #4</div>
  6.     <div id="drag5" class="drag">Drag #5</div>
  7.     <div id="drop"></div>
  8. </div>
<div id="play">
    <div id="drag1" class="drag">Drag #1</div>
    <div id="drag2" class="drag">Drag #2</div>
    <div id="drag3" class="drag">Drag #3</div>
    <div id="drag4" class="drag">Drag #4</div>
    <div id="drag5" class="drag">Drag #5</div>
    <div id="drop"></div>
</div>

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

  1. .drag {
  2.     height: 50px;
  3.     width: 50px;
  4.     border: 1px solid black;
  5.     background-color: #004C6D;
  6.     color: white;
  7.     cursor: move;
  8.     float: left;
  9.     margin: 4px;
  10.     z-index: 2;
  11. }
  12. #play {
  13.     border: 1px solid black;
  14.     height: 300px;
  15.     position: relative;
  16. }
  17. #drop {
  18.     position: absolute;
  19.     bottom: 5px;
  20.     right: 5px;
  21.     border: 1px solid black;
  22.     background-color: #8DD5E7;
  23.     height: 75px;
  24.     width: 65%;
  25.     z-index: 1;
  26. }
  27. #drop p {
  28.     margin: 1em;
  29. }
  30. #drop p strong {
  31.     font-weight: bold;
  32. }
  33. #drop.yui-dd-drop-over {
  34.     background-color: #FFA928;
  35. }
.drag {
    height: 50px;
    width: 50px;
    border: 1px solid black;
    background-color: #004C6D;
    color: white;
    cursor: move;
    float: left;
    margin: 4px;
    z-index: 2;
}
#play {
    border: 1px solid black;
    height: 300px;
    position: relative;
}
#drop {
    position: absolute;
    bottom: 5px;
    right: 5px;
    border: 1px solid black;
    background-color: #8DD5E7;
    height: 75px;
    width: 65%;
    z-index: 1;
}
#drop p {
    margin: 1em;
}
#drop p strong {
    font-weight: bold;
}
#drop.yui-dd-drop-over {
    background-color: #FFA928;
}

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.

  1. YUI().use('dd-drop', 'dd-constrain');
YUI().use('dd-drop', 'dd-constrain');

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.

  1.     var data = {
  2.         'drag1': { color: 'white', size: 'x-small', price: '$5.00' },
  3.         'drag2': { color: 'blue', size: 'small', price: '$6.00' },
  4.         'drag3': { color: 'green', size: 'medium', price: '$7.00' },
  5.         'drag4': { color: 'red', size: 'large', price: '$10.00' },
  6.         'drag5': { color: 'purple', size: 'x-large', price: '$15.00' }
  7.     };
    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' }
    };

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

  1. YUI().use('dd-drop', 'dd-constrain', function(Y) {
  2.     //Data to attach to each drag object
  3.     var data = {
  4.         'drag1': { color: 'white', size: 'x-small', price: '$5.00' },
  5.         'drag2': { color: 'blue', size: 'small', price: '$6.00' },
  6.         'drag3': { color: 'green', size: 'medium', price: '$7.00' },
  7.         'drag4': { color: 'red', size: 'large', price: '$10.00' },
  8.         'drag5': { color: 'purple', size: 'x-large', price: '$15.00' }
  9.     };
  10.     //Get all the divs with the class drag
  11.     var drags = Y.Node.all('#play div.drag');
  12.     //Walk through each one
  13.     drags.each(function(v, k) {
  14.         //scope a local var for the data
  15.         var thisData = {};
  16.         //Using Y.mix to break this data from the data above
  17.         Y.mix(thisData, data[v.get('id')]);
  18.  
  19.         //Create the new Drag Instance
  20.         var dd = new Y.DD.Drag({
  21.             //Give it the node
  22.             node: v,
  23.             //Set the dragMode to intersect
  24.             dragMode: 'intersect',
  25.             //Attach the data here..
  26.             data: thisData
  27.         }).plug(Y.Plugin.DDConstrained, {
  28.             //Keep it inside the work area
  29.             constrain2node: '#play'
  30.         });
  31.         //Prevent the default end event (this moves the node back to it's start position)
  32.         dd.on('drag:end', function(e) {
  33.             e.preventDefault();
  34.         });
  35.     });
  36. });
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,
            //Set the dragMode to intersect
            dragMode: 'intersect',
            //Attach the data here..
            data: thisData
        }).plug(Y.Plugin.DDConstrained, {
            //Keep it inside the work area
            constrain2node: '#play'
        });
        //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.

  1. var drop = new Y.DD.Drop({
  2.     node: '#drop'
  3. });
  4. //Listen for a drop:hit on this target
  5. drop.on('drop:hit', function(e) {
  6.     //Now we get the drag instance that triggered the drop hit
  7.     var drag = e.drag;
  8.     //get the data from it
  9.     var data = drag.get('data');
  10.  
  11.     //Do something with the data
  12.     var out = ['id: ' + drag.get('node').get('id')];
  13.     Y.each(data, function(v, k) {
  14.         out[out.length] = k + ': ' + v;
  15.     });
  16.     var str = '<p><strong>Dropped</strong>: ' + out.join(', ') + '</p>';
  17.     this.get('node').set('innerHTML', str);
  18. });
var drop = new Y.DD.Drop({
    node: '#drop'
});
//Listen for a drop:hit on this target
drop.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);
});

Full Example Source

  1. YUI().use('dd-drop', 'dd-constrain', function(Y) {
  2.     var data = {
  3.         'drag1': { color: 'white', size: 'x-small', price: '$5.00' },
  4.         'drag2': { color: 'blue', size: 'small', price: '$6.00' },
  5.         'drag3': { color: 'green', size: 'medium', price: '$7.00' },
  6.         'drag4': { color: 'red', size: 'large', price: '$10.00' },
  7.         'drag5': { color: 'purple', size: 'x-large', price: '$15.00' }
  8.     };
  9.     var drags = Y.Node.all('#play div.drag');
  10.     drags.each(function(v, k, items) {
  11.         var thisData = {};
  12.         Y.mix(thisData, data[v.get('id')]);
  13.         var dd = new Y.DD.Drag({
  14.             node: items.item(k),
  15.             dragMode: 'intersect',
  16.             data: thisData
  17.         }).plug(Y.Plugin.DDConstrained, {
  18.             //Keep it inside the work area
  19.             constrain2node: '#play'
  20.         });
  21.         //Prevent the default end event (this moves the node back to it's start position)
  22.         dd.on('drag:end', function(e) {
  23.             e.preventDefault();
  24.         });
  25.     });
  26.  
  27.     var drop = new Y.DD.Drop({
  28.         node: '#drop'
  29.     });
  30.     drop.on('drop:hit', function(e) {
  31.         var drag = e.drag;
  32.         var data = drag.get('data');
  33.         var out = ['id: ' + drag.get('node').get('id')];
  34.         Y.each(data, function(v, k) {
  35.             out[out.length] = k + ': ' + v;
  36.         });
  37.         var str = '<p><strong>Dropped</strong>: ' + out.join(', ') + '</p>';
  38.         this.get('node').set('innerHTML', str);
  39.     });
  40. });
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),
            dragMode: 'intersect',
            data: thisData
        }).plug(Y.Plugin.DDConstrained, {
            //Keep it inside the work area
            constrain2node: '#play'
        });
        //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);
    });
});

More Drag & Drop Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings