Drag & Drop: Drag Constrained to a Region
+ +
+
+
+ +
This example shows how to constrain a draggable Node to another Nodes region.
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
2
3
Setting up the Node
+First we need to create the HTML structure used in this example.
+ +Now we give the Nodes some CSS to make them visible.
+ + +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).
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.
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.