This example shows how to apply the Drag Plugin to a node.
Drag Me Here
Can't drag me hereSetting up the Node
First we need to create an HTML Node to make draggable.
<div id="demo"><h2>Drag Me Here</h2>Can't drag me here</div>
Now we give that Node some CSS to make it visible.
#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;
}
Setting up the YUI Instance
Now we need to create our YUI instance and tell it to load the dd-plugin module.
YUI().use('dd-plugin');
Making the Node draggable with the Drag Plugin
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.
YUI().use('dd-plugin', function(Y) {
var node = Y.one('#demo');
node.plug(Y.Plugin.Drag);
});
Accessing the Drag instance
Now that we have a draggable Node, you can get access to the Drag Instance from the dd namespace on the Node instance.
YUI().use('dd-plugin', function(Y) {
var node = Y.one('#demo');
node.plug(Y.Plugin.Drag);
//Now you can only drag it from the x in the corner
node.dd.addHandle('h2');
});