5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<div class="intro">
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>This example shows how to constrain a draggable Node to another Node's region.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<div class="example">
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass {{>constrained-drag-source}}
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h3>Setting up the Node</h3>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>First we need to create the HTML structure used in this example.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<div id="dd-demo-canvas1">
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <div id="dd-demo-canvas2">
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <div id="dd-demo-canvas3">
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <div id="dd-demo-1" class="dd-demo"><div>1</div></div>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <div id="dd-demo-2" class="dd-demo"><div>2</div></div>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <div id="dd-demo-3" class="dd-demo"><div>3</div></div>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>Now we give the Nodes some CSS to make them visible.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass position: relative;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass text-align: center;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass color: #fff;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass cursor: move;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass height: 60px;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass width: 60px;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass.dd-demo div {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass border: 1px solid black;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass height: 58px;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass width: 58px;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass#dd-demo-canvas1 {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass padding: 55px;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass background-color: #004C6D;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass border: 1px solid black;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass#dd-demo-canvas2 {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass padding: 25px;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass background-color: #CDCDCD;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass border: 1px solid black;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass#dd-demo-canvas3 {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass padding: 15px;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass background-color: #8DD5E7;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass border: 1px solid black;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass background-color: #8DD5E7;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass color: #000;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass background-color: #CDCDCD;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass color: #000;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass background-color: #004C6D;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h3>Setting up the YUI Instance</h3>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>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).</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav GlassYUI().use('dd-constrain');
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h3>Making the Nodes draggable</h3>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>Now that we have a YUI instance with the `dd-constrain` module, we need to instantiate the `Drag` instance on the Nodes.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav GlassYUI().use('dd-constrain', function(Y) {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass var dd1 = new Y.DD.Drag({
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass node: '#dd-demo-1'
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass var dd2 = new Y.DD.Drag({
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass node: '#dd-demo-2'
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass var dd3 = new Y.DD.Drag({
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass node: '#dd-demo-3'
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h3>Constrain the Nodes to other Nodes</h3>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>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.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav GlassYUI().use('dd-constrain', function(Y) {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass var dd1 = new Y.DD.Drag({
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass node: '#dd-demo-1'
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass constrain2node: '#dd-demo-canvas3'
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass var dd2 = new Y.DD.Drag({
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass node: '#dd-demo-2'
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass constrain2node: '#dd-demo-canvas2'
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass var dd3 = new Y.DD.Drag({
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass node: '#dd-demo-3'
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass constrain2node: '#dd-demo-canvas1'