YUI 3.x Home -

YUI Library Examples: Drag & Drop: Drag Constrained to a Region

Drag & Drop: Drag Constrained to a Region

This example shows how to constrain a draggable Node to another Nodes region.

View example in new window.

1
2
3

Setting up the Node

First we need to create the HTML structure used in this example.

  1. <div id="dd-demo-canvas1">
  2.     <div id="dd-demo-canvas2">
  3.         <div id="dd-demo-canvas3">
  4.             <div id="dd-demo-1" class="dd-demo"><div>1</div></div>
  5.             <div id="dd-demo-2" class="dd-demo"><div>2</div></div>
  6.             <div id="dd-demo-3" class="dd-demo"><div>3</div></div>
  7.         </div>
  8.     </div>
  9. </div>
<div id="dd-demo-canvas1">
    <div id="dd-demo-canvas2">
        <div id="dd-demo-canvas3">
            <div id="dd-demo-1" class="dd-demo"><div>1</div></div>
            <div id="dd-demo-2" class="dd-demo"><div>2</div></div>
            <div id="dd-demo-3" class="dd-demo"><div>3</div></div>
        </div>
    </div>
</div>

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

  1. .dd-demo {
  2.     position: relative;
  3.     text-align: center;
  4.     color: #fff;
  5.     cursor: move;
  6.     height: 60px;
  7.     width: 60px;
  8.     padding: 0;
  9.     margin: 0;
  10. }
  11.  
  12. .dd-demo div {
  13.     border: 1px solid black;
  14.     height: 58px;
  15.     width: 58px;
  16. }
  17.  
  18. #dd-demo-canvas1 {
  19.     padding: 55px;
  20.     background-color: #004C6D;
  21.     border: 1px solid black;
  22. }
  23. #dd-demo-canvas2 {
  24.     padding: 25px;
  25.     background-color: #CDCDCD;
  26.     border: 1px solid black;
  27. }
  28. #dd-demo-canvas3 {
  29.     padding: 15px;
  30.     background-color: #8DD5E7;
  31.     border: 1px solid black;
  32. }
  33.  
  34. #dd-demo-1 { 
  35.     background-color: #8DD5E7;
  36.     top:5px;
  37.     left:5px;
  38.     color: #000;
  39. }
  40.  
  41. #dd-demo-2 { 
  42.     background-color: #CDCDCD;
  43.     top:50px;
  44.     left:100px;
  45.     color: #000;
  46. }
  47.  
  48. #dd-demo-3 {
  49.     background-color: #004C6D;
  50.     top:-100px;
  51.     left:200px;
  52. }
.dd-demo {
    position: relative;
    text-align: center;
    color: #fff;
    cursor: move;
    height: 60px;
    width: 60px;
    padding: 0;
    margin: 0;
}
 
.dd-demo div {
    border: 1px solid black;
    height: 58px;
    width: 58px;
}
 
#dd-demo-canvas1 {
    padding: 55px;
    background-color: #004C6D;
    border: 1px solid black;
}
#dd-demo-canvas2 {
    padding: 25px;
    background-color: #CDCDCD;
    border: 1px solid black;
}
#dd-demo-canvas3 {
    padding: 15px;
    background-color: #8DD5E7;
    border: 1px solid black;
}
 
#dd-demo-1 { 
    background-color: #8DD5E7;
    top:5px;
    left:5px;
    color: #000;
}
 
#dd-demo-2 { 
    background-color: #CDCDCD;
    top:50px;
    left:100px;
    color: #000;
}
 
#dd-demo-3 {
    background-color: #004C6D;
    top:-100px;
    left:200px;
}

Setting up the YUI Instance

Now we need to create our YUI instance and tell it to load the dd-constrain module (that will load the dd-ddm and dd-drag modules too).

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

Making the Nodes draggable

Now that we have a YUI instance with the dd-constrain module, we need to instantiate the Drag instance on the Nodes.

  1. YUI().use('dd-constrain', function(Y) {
  2.     var dd1 = new Y.DD.Drag({
  3.         node: '#dd-demo-1'
  4.     });
  5.  
  6.     var dd2 = new Y.DD.Drag({
  7.         node: '#dd-demo-2'
  8.     });
  9.  
  10.     var dd3 = new Y.DD.Drag({
  11.         node: '#dd-demo-3'
  12.     });
  13. });
YUI().use('dd-constrain', function(Y) {
    var dd1 = new Y.DD.Drag({
        node: '#dd-demo-1'
    });
 
    var dd2 = new Y.DD.Drag({
        node: '#dd-demo-2'
    });
 
    var dd3 = new Y.DD.Drag({
        node: '#dd-demo-3'
    });
});

Constrain the Nodes to other Nodes

Now that we have the Nodes draggable, we need to constrain them. We can do this by plugging the DDConstrained on to the Drag instance and passing it a config option called constrain2node and giving it a selector string of the Node we want to constrain to.

  1. YUI().use('dd-constrain', function(Y) {
  2.     var dd1 = new Y.DD.Drag({
  3.         node: '#dd-demo-1'
  4.     }).plug(Y.Plugin.DDConstrained, {
  5.         constrain2node: '#dd-demo-canvas3'
  6.     });
  7.  
  8.     var dd2 = new Y.DD.Drag({
  9.         node: '#dd-demo-2'
  10.     }).plug(Y.Plugin.DDConstrained, {
  11.         constrain2node: '#dd-demo-canvas2'
  12.     });
  13.  
  14.     var dd3 = new Y.DD.Drag({
  15.         node: '#dd-demo-3'
  16.     }).plug(Y.Plugin.DDConstrained, {
  17.         constrain2node: '#dd-demo-canvas1'
  18.     });
  19. });
YUI().use('dd-constrain', function(Y) {
    var dd1 = new Y.DD.Drag({
        node: '#dd-demo-1'
    }).plug(Y.Plugin.DDConstrained, {
        constrain2node: '#dd-demo-canvas3'
    });
 
    var dd2 = new Y.DD.Drag({
        node: '#dd-demo-2'
    }).plug(Y.Plugin.DDConstrained, {
        constrain2node: '#dd-demo-canvas2'
    });
 
    var dd3 = new Y.DD.Drag({
        node: '#dd-demo-3'
    }).plug(Y.Plugin.DDConstrained, {
        constrain2node: '#dd-demo-canvas1'
    });
});

More Drag & Drop Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

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