This example shows how you can use the DD Scroll plugin to scroll the browser window as you drag.
x
Drag MeSetting up the Node
First we need to create an HTML Node to make draggable.
<div id="demo"><h2 class="no-toc">x</h2>Drag Me</div>
Now we give that Node some CSS to make it visible.
#demo {
height: 100px;
width: 100px;
border: 1px solid black;
background-color: #8DD5E7;
padding: 7px;
position: relative;
}
#demo h2 {
padding: 0;
margin: 0;
position: absolute;
top: 5px;
right: 5px;
font-size: 110%;
color: black;
font-weight: bold;
cursor: move;
}
Setting up the YUI Instance
Now we need to create our YUI instance and tell it to load the dd-drag and dd-scroll modules.
YUI().use('dd-drag', 'dd-scroll');
Making the Node draggable with DD
Now that we have a YUI instance with the dd-drag and dd-scroll modules, we need to instantiate a DD instance from this Node.
var dd = new Y.DD.Drag({
node: '#demo'
}).addHandle('h2');
Making the Window Scroll
Now that we have a draggable Node, we need to plug the Plugin.DDWinScroll plugin onto the Drag instance.
var dd = new Y.DD.Drag({
node: '#demo'
}).addHandle('h2').plug(Y.Plugin.DDWinScroll);