1787N/A<div class="intro">

1787N/A<p>This example shows a simple drag interaction that doesn't require a drop interaction.</p>

1787N/A</div>

1787N/A

1787N/A<div class="example">

1787N/A {{>simple-drag-source}}

1787N/A</div>

1787N/A

1787N/A<h3>Setting up the Node</h3>

1787N/A<p>First we need to create an HTML Node to make draggable.</p>

1787N/A```

1787N/A<div id="demo">Drag Me</div>

1787N/A```

1787N/A

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

1787N/A

1787N/A```

1787N/A#demo {

1787N/A height: 100px;

1787N/A width: 100px;

1787N/A border: 1px solid black;

1787N/A background-color: #8DD5E7;

5390N/A cursor: move;

1787N/A}

5680N/A```

1787N/A

1787N/A<h3>Setting up the YUI Instance</h3>

1787N/A<p>Now we need to create our YUI instance and tell it to load the `dd-drag` module.</p>

5390N/A

1787N/A```

1787N/AYUI().use('dd-drag');

5390N/A```

1787N/A

5390N/A

1787N/A<h3>Making the Node draggable</h3>

5390N/A<p>Now that we have a YUI instance with the `dd-drag` module, we need to instantiate the `Drag` instance on this Node.</p>

2899N/A

7422N/A```

5680N/AYUI().use('dd-drag', function(Y) {

1787N/A //Selector of the node to make draggable

1825N/A var dd = new Y.DD.Drag({

1825N/A node: '#demo'

1825N/A });

7422N/A});

7422N/A```

1787N/A