Jump to Table of Contents

Example: Window Scrolling

This example shows how you can use the DD Scroll plugin to scroll the browser window as you drag.

Drag Me

Setting up the Node

First we need to create an HTML Node to make draggable.

<div id="demo">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;
    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'
});

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'
}).plug(Y.Plugin.DDWinScroll);