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.

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;
            }
        });
    });
 
 
});

Copyright © 2009 Yahoo! Inc. All rights reserved.

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