Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

77 lines (61 sloc) 1.931 kb
<div class="intro">
<p>This example shows how to apply the Drag Plugin to a node.</p>
</div>
<div class="example">
{{>drag-plugin-source}}
</div>
<h3>Setting up the Node</h3>
<p>First we need to create an HTML Node to make draggable.</p>
```
<div id="demo"><h2>Drag Me Here</h2>Can't drag me here</div>
```
<p>Now we give that Node some CSS to make it visible.</p>
```
#demo {
height: 100px;
width: 150px;
border: 1px solid black;
background-color: #8DD5E7;
position: relative;
}
#demo h2 {
padding: 5px;
margin: 0;
height: 30px;
font-size: 120%;
color: black;
font-weight: bold;
text-align: center;
cursor: move;
background-color: #CDCDCD;
border-bottom: 1px solid black;
}
```
<h3>Setting up the YUI Instance</h3>
<p>Now we need to create our YUI instance and tell it to load the `dd-plugin` module.</p>
```
YUI().use('dd-plugin');
```
<h3>Making the Node draggable with the Drag Plugin</h3>
<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>
```
YUI().use('dd-plugin', function(Y) {
var node = Y.one('#demo');
node.plug(Y.Plugin.Drag);
});
```
<h3>Accessing the Drag instance</h3>
<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>
<h4>Using a drag handle</h4>
<p>Drag handles allow you to specify what element will initiate a drag. For example,
you may want the entire element to be able to be dragged, but you only want them to
click on the header to do that (in case you have content that will not react well to
a drag, like an `input` or an `anchor`).</p>
```
YUI().use('dd-plugin', function(Y) {
var node = Y.one('#demo');
node.plug(Y.Plugin.Drag);
//Now you can only drag it from the h2 at the top of the box
node.dd.addHandle('h2');
});
```
Jump to Line
Something went wrong with that request. Please try again.