<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>x</h2>Drag Me</div>

```

<p>Now we give that Node some CSS to make it visible.</p>

```

#demo {

height: 100px;

width: 100px;

border: 1px solid black;

background-color: #8DD5E7;

padding: 7px;

}

#demo h2 {

padding: 0;

margin: 0;

position: absolute;

top: 5px;

right: 5px;

font-size: 110%;

color: black;

font-weight: bold;

cursor: move;

}

```

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

node.plug(Y.Plugin.Drag);

});

```

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

node.plug(Y.Plugin.Drag);

//Now you can only drag it from the x in the corner

node.dd.addHandle('h2');

});

```