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

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

407N/A</div>

407N/A

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

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

407N/A</div>

407N/A

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

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

407N/A

407N/A```

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

407N/A```

407N/A

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

407N/A

407N/A```

407N/A#demo {

407N/A height: 100px;

407N/A width: 100px;

407N/A border: 1px solid black;

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

407N/A cursor: move;

407N/A}

407N/A```

407N/A

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

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

407N/A

407N/A```

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

844N/A```

844N/A

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

1289N/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>

407N/A

407N/A```

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

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

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

407N/A node: '#demo',

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

407N/A});

407N/A```

407N/A