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

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

166N/A</div>

166N/A

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

166N/A {{>proxy-drag-source}}

166N/A</div>

166N/A

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

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

166N/A

166N/A```

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

166N/A```

166N/A

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

166N/A

166N/A```

166N/A#demo {

166N/A height: 100px;

166N/A width: 100px;

166N/A border: 1px solid black;

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

166N/A cursor: move;

166N/A}

166N/A```

166N/A

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

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

166N/A

166N/A```

166N/AYUI().use('dd-drag', 'dd-proxy');

166N/A```

166N/A

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

166N/A<p>Now that we have a YUI instance with the `dd-drag` and `dd-proxy` modules, we need to instantiate the `Drag` instance on this Node and add the `DDProxy` plugin.</p>

166N/A

166N/A```

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

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

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

166N/A node: '#demo',

166N/A }).plug(Y.Plugin.DDProxy); //This config option makes the node a Proxy Drag

166N/A});

166N/A```

166N/A