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

+
+ + Jump to Table of Contents + + +

Example: Simple Drag

+
+
+
+
+

This example shows a simple drag interaction that doesn't require a drop interaction.

+
+ +
+ + +
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;
+    cursor: move;
+}
+ + +

Setting up the YUI Instance

+

Now we need to create our YUI instance and tell it to load the dd-drag module.

+ +
YUI().use('dd-drag');
+ + + +

Making the Node draggable

+

Now that we have a YUI instance with the dd-drag module, we need to instantiate the Drag instance on this Node.

+ +
YUI().use('dd-drag', function(Y) {
+    //Selector of the node to make draggable
+    var dd = new Y.DD.Drag({
+        node: '#demo'
+    });   
+});
+ +
+
+
+ +
+ +
+
+
+ + + + + + + + + + +