diff -r 322d0feea350 -r 89ef5ed3c48b src/cm/media/js/lib/yui/yui_3.10.3/docs/dd/winscroll.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/dd/winscroll.html Tue Jul 16 14:29:46 2013 +0200 @@ -0,0 +1,350 @@ + + + + + Example: Window Scrolling + + + + + + + + + + +
+
+

+
+ + 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);
+ +
+
+
+ +
+ +
+
+
+ + + + + + + + + + +