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