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

+
+ + Jump to Table of Contents + + +

Example: Drag - Node plugin

+
+
+
+
+

This shows two examples of applying the Drag Plugin to nodes. +The luggage only allows a drag by its handle.

+
+ +
+ + + +
+
Head
+
+ Only drags from the head +
+
+ +
+
+
+ + + +
+ +

Setting up the Node

+

First we'll create the HTML for the blue box node.

+ +
<div class="demo">
+    <div class="yui-hd"><span>Head</span></div>
+    <div class="yui-bd">
+        Only drags from the head
+    </div>
+</div>
+ + +

Now we give that Node some CSS visible style.

+ +
/* Blue box example */
+.example .demo {
+    position:relative;
+    width:22em;
+    border: 1px solid #9EA8C6;
+    background: #ECEFFB;
+    border-radius: 3px;
+    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
+    text-align: center;
+}
+
+.example .demo .yui-hd {
+    padding: 0 0.3em;
+    background: #B6BFDA url(../assets/dd/images/drag_handle_hd_bkg.png) repeat-x;
+    font-weight: bold;
+    border: solid #B6BFDA;
+    border-width: 0 8px;
+    color: #30418C;
+    line-height: 1.8;
+    font-size: 139%;
+    cursor: move;
+}
+
+.example .demo .yui-hd span{
+    background-color: #B6BFDA;
+    padding: 0.1em 0.4em;
+    text-align: center;
+}
+
+.example .demo .yui-bd {
+    padding: 2em 0.5em 2.5em;
+}
+ + +

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 blue box 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) {
+    // The blue box
+    var node = Y.one('.example .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.

+ +

Using a drag handle

+ +

Drag handles allow you to specify what element will initiate a drag. For example, +you may want the entire element to be able to be dragged, but you only want them to +click on the header to do that (in case you have content that will not react well to +a drag, like an input or an anchor).

+ +
YUI().use('dd-plugin', function(Y) {
+    // The blue box
+    var node = Y.one('.example .demo');
+    node.plug(Y.Plugin.Drag);
+
+    //Now you can only drag it from the .yui-hd at the top of the blue box
+    node.dd.addHandle('.yui-hd');
+});
+ +

The Luggage

+

The draggable luggage is much the same as the blue box. +The HTML looks like this... +

+
<div class="luggage">
+    <div class="handle"></div>
+</div>
+ +

This is the YUI instance with the dd-plugin module for luggage.

+
YUI().use('dd-plugin', function(Y) {
+    var luggage = Y.one('.example .luggage');
+    luggage.plug(Y.Plugin.Drag);
+    luggage.dd.addHandle('.example .luggage .handle');
+});
+ +

The last rule of CSS for luggage makes the handle pop up.

+
/* Luggage */
+.example .luggage{
+    position: relative;
+    background: url(../assets/dd/images/luggage.png) no-repeat;
+    width: 377px;
+    height: 155px;
+    margin-top: 3em;
+}
+
+.example .handle{
+    position: absolute;
+    bottom: 1px;
+    left: 125px;
+    width: 115px;
+    height: 60px;
+    cursor: move;
+}
+
+.example .handle:hover{
+    background: url(../assets/dd/images/luggage_handle.png) no-repeat;
+}
+ +

The Full Source

+
<style>
+
+/* Blue box example */
+.example .demo {
+    position:relative;
+    width:22em;
+    border: 1px solid #9EA8C6;
+    background: #ECEFFB;
+    border-radius: 3px;
+    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
+    text-align: center;
+}
+
+.example .demo .yui-hd {
+    padding: 0 0.3em;
+    background: #B6BFDA url(../assets/dd/images/drag_handle_hd_bkg.png) repeat-x;
+    font-weight: bold;
+    border: solid #B6BFDA;
+    border-width: 0 8px;
+    color: #30418C;
+    line-height: 180%;
+    font-size: 139%;
+    cursor: move;
+}
+
+.example .demo .yui-hd span{
+    background-color: #B6BFDA;
+    padding: 0.1em 0.4em;
+    text-align: center;
+}
+
+.example .demo .yui-bd {
+    padding: 2em 0.5em 2.5em;
+}
+
+/* Luggage */
+.example .luggage{
+    position: relative;
+    background: url(../assets/dd/images/luggage.png) no-repeat;
+    width: 377px;
+    height: 155px;
+    margin-top: 3em;
+}
+
+.example .handle{
+    position: absolute;
+    bottom: 1px;
+    left: 125px;
+    width: 115px;
+    height: 60px;
+    cursor: move;
+}
+
+.example .handle:hover{
+    background: url(../assets/dd/images/luggage_handle.png) no-repeat;
+}
+</style>
+
+
+<div class="demo">
+    <div class="yui-hd"><span>Head</span></div>
+    <div class="yui-bd">
+        Only drags from the head
+    </div>
+</div>
+
+<div class="luggage">
+    <div class="handle"></div>
+</div>
+
+
+<script>
+YUI().use('dd-plugin', function(Y) {
+    var node,
+        luggage;
+
+    // Draggable blue box
+    node = Y.one('.example .demo');
+    node.plug(Y.Plugin.Drag);
+    node.dd.addHandle('.yui-hd');
+
+    // Luggage
+    luggage = Y.one('.example .luggage');
+    luggage.plug(Y.Plugin.Drag);
+    luggage.dd.addHandle('.example .luggage .handle');
+
+});
+</script>
+ +
+
+
+ +
+
+ + + + + +
+
+

Examples

+
+ +
+ +
+
+ + + +
+
+

Examples That Use This Component

+
+ +
+ +
+
+ +
+
+
+
+ + + + + + + + + + +