drag-plugin.mustache revision 5b139d58acfcae4b1bcab5a895706abafc2a87a0
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>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<div id="demo"><h2>x</h2>Drag Me</div>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>Now we give that Node some CSS to make it visible.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass height: 100px;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass width: 100px;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass border: 1px solid black;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass background-color: #8DD5E7;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass padding: 7px;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass position: absolute;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass font-size: 110%;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass color: black;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass font-weight: bold;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass cursor: move;
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