diff -r 000000000000 -r 40c8f766c9b8 src/cm/media/js/lib/yui/yui3.0.0/examples/dd/constrained-drag.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/cm/media/js/lib/yui/yui3.0.0/examples/dd/constrained-drag.html Mon Nov 23 15:14:29 2009 +0100 @@ -0,0 +1,416 @@ + + + + + YUI Library Examples: Drag & Drop: Drag Constrained to a Region + + + + + + + + + + + + + + +
+
+
+

+ + 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

+
+
+ + + + + +