<div class="intro">
<p>This example shows how to apply the Drag Plugin to a node.</p>
</div>
<div class="example">
{{>drag-plugin-source}}
</div>
<h3>Setting up the Node</h3>
<p>First we need to create an HTML Node to make draggable.</p>
```
<div id="demo"><h2>Drag Me Here</h2>Can't drag me here</div>
```
<p>Now we give that Node some CSS to make it visible.</p>
```
#demo {
height: 100px;
width: 150px;
border: 1px solid black;
background-color: #8DD5E7;
position: relative;
}
#demo h2 {
padding: 5px;
margin: 0;
height: 30px;
font-size: 120%;
color: black;
font-weight: bold;
text-align: center;
cursor: move;
background-color: #CDCDCD;
border-bottom: 1px solid black;
}
```
<h3>Setting up the YUI Instance</h3>
<p>Now we need to create our YUI instance and tell it to load the `dd-plugin` module.</p>
```
YUI().use('dd-plugin');
```
<h3>Making the Node draggable with the Drag Plugin</h3>
<p>Now that we have a YUI instance with the `dd-plugin` module, we can plug the `Drag` plugin into `Node` instances to make them draggable.</p>
```
YUI().use('dd-plugin', function(Y) {
var node = Y.one('#demo');
});
```
<h3>Accessing the Drag instance</h3>
<p>Now that we have a draggable Node, you can get access to the Drag Instance from the `dd` namespace on the `Node` instance.</p>
```
YUI().use('dd-plugin', function(Y) {
var node = Y.one('#demo');
//Now you can only drag it from the x in the corner
node.dd.addHandle('h2');
});
```