YUI 3.x Home -

YUI Library Examples: Drag & Drop: Interaction Groups

Drag & Drop: Interaction Groups

Using interaction groups, this example demonstrates how to tie into the Drag & Drop Utility's interesting moments to provide visual affordances for the current drag operation.

View example in new window.

1
3
4
5
6
2
1
2
3
4
5
6

Setting up the Work Area

First we need to create the work area, players (drags) and slots (drops).

  1. <div id="workarea">
  2.  
  3.     <div class="slot" id="t1">1</div>
  4.     <div class="slot bottom" id="b1">3</div>
  5.     <div class="slot bottom" id="b2">4</div>
  6.     <div class="slot bottom" id="b3">5</div>
  7.     <div class="slot bottom" id="b4">6</div>
  8.     <div class="slot" id="t2">2</div>
  9.  
  10.  
  11.     <div class="player" id="pt1">1</div>
  12.     <div class="player" id="pt2">2</div>
  13.     <div class="player" id="pb1">3</div>
  14.     <div class="player" id="pb2">4</div>
  15.     <div class="player" id="pboth1">5</div>
  16.     <div class="player" id="pboth2">6</div>
  17.  
  18. </div>
<div id="workarea">
 
    <div class="slot" id="t1">1</div>
    <div class="slot bottom" id="b1">3</div>
    <div class="slot bottom" id="b2">4</div>
    <div class="slot bottom" id="b3">5</div>
    <div class="slot bottom" id="b4">6</div>
    <div class="slot" id="t2">2</div>
 
 
    <div class="player" id="pt1">1</div>
    <div class="player" id="pt2">2</div>
    <div class="player" id="pb1">3</div>
    <div class="player" id="pb2">4</div>
    <div class="player" id="pboth1">5</div>
    <div class="player" id="pboth2">6</div>
 
</div>

Now we give them some CSS to make them visible.

  1. .slot {
  2.     border: 2px solid #808080;
  3.     background-color: #CDCDCD;
  4.     color: #666666;
  5.     text-align: center;
  6.     position: relative;
  7.     float: left;
  8.     margin: 4px;
  9.     width: 60px;
  10.     height: 60px;
  11.     z-index: 0;
  12. }
  13. .player {
  14.     border: 2px solid #808080;
  15.     color: #ffffff;
  16.     text-align: center;
  17.     position: relative;
  18.     float: left;
  19.     margin: 4px;
  20.     width: 60px;
  21.     height: 60px;
  22.     top: 150px;
  23.     z-index: 1;
  24.     cursor: move;
  25. }
  26. #pt1 {
  27.     clear: both;
  28. }
  29. .bottom {
  30.     top: 50px;
  31. }
  32.  
  33. #pt1, #pt2 {
  34.     background-color: #71241A;
  35. }
  36. #pb1, #pb2 {
  37.     background-color: #004C6D;
  38. }
  39.  
  40. #pboth1, #pboth2 {
  41.     background-color: #FFA928;
  42. }
  43.  
  44. #workarea {
  45.     position: relative;
  46.     height: 300px;
  47.     width: 500px;
  48. }
  49. #workarea .yui-dd-drop-active-valid {
  50.     border: 2px solid green;
  51. }
  52. #workarea .yui-dd-drop-over {
  53.     background-color: green;
  54. }
  55. #workarea .yui-dd-drop-active-invalid {
  56.     border: 2px solid red;
  57. }
.slot {
    border: 2px solid #808080;
    background-color: #CDCDCD;
    color: #666666;
    text-align: center;
    position: relative;
    float: left;
    margin: 4px;
    width: 60px;
    height: 60px;
    z-index: 0;
}
.player {
    border: 2px solid #808080;
    color: #ffffff;
    text-align: center;
    position: relative;
    float: left;
    margin: 4px;
    width: 60px;
    height: 60px;
    top: 150px;
    z-index: 1;
    cursor: move;
}
#pt1 {
    clear: both;
}
.bottom {
    top: 50px;
}
 
#pt1, #pt2 {
    background-color: #71241A;
}
#pb1, #pb2 {
    background-color: #004C6D;
}
 
#pboth1, #pboth2 {
    background-color: #FFA928;
}
 
#workarea {
    position: relative;
    height: 300px;
    width: 500px;
}
#workarea .yui-dd-drop-active-valid {
    border: 2px solid green;
}
#workarea .yui-dd-drop-over {
    background-color: green;
}
#workarea .yui-dd-drop-active-invalid {
    border: 2px solid red;
}

Setting up the YUI Instance

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

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

Setting up the Drop Targets

Now that we have a YUI instance with the requested modules, we are going to create our Drop Targets.

  1. YUI().use('dd-drop', 'dd-proxy', 'dd-constrain', function(Y) {
  2.     //Get all the nodes with the class of .slot under #workarea
  3.     var slots = Y.Node.get('#workarea').queryAll('.slot');
  4.     //Loop through them
  5.     Y.each(slots, function(v, k) {
  6.         var id = v.get('id'), groups = ['two'];
  7.         //Assign them to different groups
  8.         switch (id) {
  9.             case 't1':
  10.             case 't2':
  11.                 groups = ['one'];
  12.                 break;
  13.         }
  14.         //Create the Drop object
  15.         var drop = new Y.DD.Drop({
  16.             node: v,
  17.             //With the new groups array as a config option
  18.             groups: groups
  19.         });
  20.     });
  21. });
YUI().use('dd-drop', 'dd-proxy', 'dd-constrain', function(Y) {
    //Get all the nodes with the class of .slot under #workarea
    var slots = Y.Node.get('#workarea').queryAll('.slot');
    //Loop through them
    Y.each(slots, function(v, k) {
        var id = v.get('id'), groups = ['two'];
        //Assign them to different groups
        switch (id) {
            case 't1':
            case 't2':
                groups = ['one'];
                break;
        }
        //Create the Drop object
        var drop = new Y.DD.Drop({
            node: v,
            //With the new groups array as a config option
            groups: groups
        });
    });
});

Setting up the Drag Nodes

Now we need to create the Drag Nodes and assign them to the proper group.

  1. YUI().use('dd-drop', 'dd-proxy', 'dd-constrain', function(Y) {
  2.     //Snipped
  3.     var players = Y.Node.get('#workarea').queryAll('.player');
  4.     Y.each(players, function(v, k) {
  5.         var id = v.get('id'), groups = ['one', 'two'];
  6.         switch (id) {
  7.             case 'pt1':
  8.             case 'pt2':
  9.                 groups = ['one'];
  10.                 break;
  11.             case 'pb1':
  12.             case 'pb2':
  13.                 groups = ['two'];
  14.                 break;
  15.         }
  16.         var drag = new Y.DD.Drag({
  17.             node: v,
  18.             //Assign the Groups
  19.             groups: groups,
  20.             //Use Intersect Mode for the Target Calculations
  21.             dragMode: 'intersect',
  22.         }).plug(Y.Plugin.DDProxy, {
  23.             //We don't want the node to move on end drag
  24.             moveOnEnd: false
  25.         }).plug(Y.Plugin.DDConstrained, {
  26.             //Keep me inside the workarea
  27.             constrain2node: '#workarea'
  28.         });
  29. });
YUI().use('dd-drop', 'dd-proxy', 'dd-constrain', function(Y) {
    //Snipped
    var players = Y.Node.get('#workarea').queryAll('.player');
    Y.each(players, function(v, k) {
        var id = v.get('id'), groups = ['one', 'two'];
        switch (id) {
            case 'pt1':
            case 'pt2':
                groups = ['one'];
                break;
            case 'pb1':
            case 'pb2':
                groups = ['two'];
                break;
        }
        var drag = new Y.DD.Drag({
            node: v,
            //Assign the Groups
            groups: groups,
            //Use Intersect Mode for the Target Calculations
            dragMode: 'intersect',
        }).plug(Y.Plugin.DDProxy, {
            //We don't want the node to move on end drag
            moveOnEnd: false
        }).plug(Y.Plugin.DDConstrained, {
            //Keep me inside the workarea
            constrain2node: '#workarea'
        });
});

Handling the Drops and Moments

Now we are going to listen for Four Drag Events: drag:start, drag:end, drag:drophit, drag:dropmiss

  1. drag.on('drag:start', function() {
  2.     //In this event we setup some styles to make the nodes look pretty
  3.     var p = this.get('dragNode'),
  4.         n = this.get('node');
  5.         n.setStyle('opacity', .25);
  6.         if (!this._playerStart) {
  7.             this._playerStart = this.nodeXY;
  8.         }
  9.     //Put the Drag's HTML inside the proxy
  10.     p.set('innerHTML', n.get('innerHTML'));
  11.     //set some styles on the proxy
  12.     p.setStyles({
  13.         backgroundColor: n.getStyle('backgroundColor'),
  14.         color: n.getStyle('color'),
  15.         opacity: .65
  16.     });
  17. });
  18. drag.on('drag:end', function() {
  19.     //Undo some of the styles from the start
  20.     var n = this.get('node');
  21.     n.setStyle('opacity', '1');
  22. });
  23. drag.on('drag:drophit', function(e) {
  24.     //If we drop on a target, move to its position
  25.     var xy = e.drop.get('node').getXY();
  26.     this.get('node').setXY(xy);
  27. });
  28. drag.on('drag:dropmiss', function(e) {
  29.     //If we miss a target, move back to our start position
  30.     if (this._playerStart) {
  31.         this.get('node').setXY(this._playerStart);
  32.         this._playerStart = null;
  33.     }
  34. });
drag.on('drag:start', function() {
    //In this event we setup some styles to make the nodes look pretty
    var p = this.get('dragNode'),
        n = this.get('node');
        n.setStyle('opacity', .25);
        if (!this._playerStart) {
            this._playerStart = this.nodeXY;
        }
    //Put the Drag's HTML inside the proxy
    p.set('innerHTML', n.get('innerHTML'));
    //set some styles on the proxy
    p.setStyles({
        backgroundColor: n.getStyle('backgroundColor'),
        color: n.getStyle('color'),
        opacity: .65
    });
});
drag.on('drag:end', function() {
    //Undo some of the styles from the start
    var n = this.get('node');
    n.setStyle('opacity', '1');
});
drag.on('drag:drophit', function(e) {
    //If we drop on a target, move to its position
    var xy = e.drop.get('node').getXY();
    this.get('node').setXY(xy);
});
drag.on('drag:dropmiss', function(e) {
    //If we miss a target, move back to our start position
    if (this._playerStart) {
        this.get('node').setXY(this._playerStart);
        this._playerStart = null;
    }
});

Full Javascript Code

  1. YUI({base:"../../build/", timeout: 10000}).use('dd-drop', 'dd-proxy', 'dd-constrain', function(Y) {
  2.  
  3.     var slots = Y.Node.get('#workarea').queryAll('.slot');
  4.     Y.each(slots, function(v, k) {
  5.         var id = v.get('id'), groups = ['two'];
  6.         switch (id) {
  7.             case 't1':
  8.             case 't2':
  9.                 groups = ['one'];
  10.                 break;
  11.         }
  12.         var drop = new Y.DD.Drop({
  13.             node: v,
  14.             groups: groups
  15.         });
  16.     });
  17.  
  18.     var players = Y.Node.get('#workarea').queryAll('.player');
  19.     Y.each(players, function(v, k) {
  20.         var id = v.get('id'), groups = ['one', 'two'];
  21.         switch (id) {
  22.             case 'pt1':
  23.             case 'pt2':
  24.                 groups = ['one'];
  25.                 break;
  26.             case 'pb1':
  27.             case 'pb2':
  28.                 groups = ['two'];
  29.                 break;
  30.         }
  31.         var drag = new Y.DD.Drag({
  32.             node: v,
  33.             groups: groups,
  34.             dragMode: 'intersect'
  35.         }).plug(Y.Plugin.DDProxy, {
  36.             moveOnEnd: false
  37.         }).plug(Y.Plugin.DDConstrained, {
  38.             constrain2node: '#workarea'
  39.         });
  40.         drag.on('drag:start', function() {
  41.             var p = this.get('dragNode'),
  42.                 n = this.get('node');
  43.                 n.setStyle('opacity', .25);
  44.                 if (!this._playerStart) {
  45.                     this._playerStart = this.nodeXY;
  46.                 }
  47.             p.set('innerHTML', n.get('innerHTML'));
  48.             p.setStyles({
  49.                 backgroundColor: n.getStyle('backgroundColor'),
  50.                 color: n.getStyle('color'),
  51.                 opacity: .65
  52.             });
  53.         });
  54.         drag.on('drag:end', function() {
  55.             var n = this.get('node');
  56.             n.setStyle('opacity', '1');
  57.         });
  58.         drag.on('drag:drophit', function(e) {
  59.             var xy = e.drop.get('node').getXY();
  60.             this.get('node').setXY(xy);
  61.         });
  62.         drag.on('drag:dropmiss', function(e) {
  63.             if (this._playerStart) {
  64.                 this.get('node').setXY(this._playerStart);
  65.                 this._playerStart = null;
  66.             }
  67.         });
  68.     });
  69.  
  70.  
  71. });
YUI({base:"../../build/", timeout: 10000}).use('dd-drop', 'dd-proxy', 'dd-constrain', function(Y) {
 
    var slots = Y.Node.get('#workarea').queryAll('.slot');
    Y.each(slots, function(v, k) {
        var id = v.get('id'), groups = ['two'];
        switch (id) {
            case 't1':
            case 't2':
                groups = ['one'];
                break;
        }
        var drop = new Y.DD.Drop({
            node: v,
            groups: groups
        });
    });
 
    var players = Y.Node.get('#workarea').queryAll('.player');
    Y.each(players, function(v, k) {
        var id = v.get('id'), groups = ['one', 'two'];
        switch (id) {
            case 'pt1':
            case 'pt2':
                groups = ['one'];
                break;
            case 'pb1':
            case 'pb2':
                groups = ['two'];
                break;
        }
        var drag = new Y.DD.Drag({
            node: v,
            groups: groups,
            dragMode: 'intersect'
        }).plug(Y.Plugin.DDProxy, {
            moveOnEnd: false
        }).plug(Y.Plugin.DDConstrained, {
            constrain2node: '#workarea'
        });
        drag.on('drag:start', function() {
            var p = this.get('dragNode'),
                n = this.get('node');
                n.setStyle('opacity', .25);
                if (!this._playerStart) {
                    this._playerStart = this.nodeXY;
                }
            p.set('innerHTML', n.get('innerHTML'));
            p.setStyles({
                backgroundColor: n.getStyle('backgroundColor'),
                color: n.getStyle('color'),
                opacity: .65
            });
        });
        drag.on('drag:end', function() {
            var n = this.get('node');
            n.setStyle('opacity', '1');
        });
        drag.on('drag:drophit', function(e) {
            var xy = e.drop.get('node').getXY();
            this.get('node').setXY(xy);
        });
        drag.on('drag:dropmiss', function(e) {
            if (this._playerStart) {
                this.get('node').setXY(this._playerStart);
                this._playerStart = null;
            }
        });
    });
 
 
});

More Drag & Drop Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

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