dd/docs/constrained-drag.mustache

<div class="intro">
<p>This example shows how to constrain a draggable Node to another Node's region.</p>
</div>

<div class="example">
    {{>constrained-drag-source}}
</div>

<h3>Setting up the Node</h3>
<p>First we need to create the HTML structure used in this example.</p>

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

<p>Now we give the Nodes some CSS to make them visible.</p>

```
.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;
}
```

<h3>Setting up the YUI Instance</h3>
<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>

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

<h3>Making the Nodes draggable</h3>
<p>Now that we have a YUI instance with the `dd-constrain` module, we need to instantiate the `Drag` instance on the Nodes.</p>

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

<h3>Constrain the Nodes to other Nodes</h3>
<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>

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