Skip to content
This repository
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 144 lines (124 sloc) 3.456 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143
<div class="intro">
<p>This shows two examples of applying the Drag Plugin to nodes.
The luggage only allows a drag by its handle.</p>
</div>

<div class="example">
    {{>drag-plugin-source}}
</div>

<h3>Setting up the Node</h3>
<p>First we'll create the HTML for the blue box node.</p>

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

<p>Now we give that Node some CSS visible style.</p>

```
/* 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({{{componentAssets}}}/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;
}
```

<h3>Setting up the YUI Instance</h3>
<p>Now we need to create our YUI instance and tell it to load the `dd-plugin` module.</p>

```
YUI().use('dd-plugin');
```

<h3>Making the blue box draggable with the Drag Plugin</h3>
<p>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.</p>

```
YUI().use('dd-plugin', function(Y) {
    // The blue box
    var node = Y.one('.example .demo');
    node.plug(Y.Plugin.Drag);
});
```

<h3>Accessing the Drag instance</h3>
<p>Now that we have a draggable Node, you can get access to the Drag
Instance from the `dd` namespace on the `Node` instance.</p>

<h4>Using a drag handle</h4>

<p>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`).</p>

```
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');
});
```
<h3>The Luggage</h3>
<p>The draggable luggage is much the same as the blue box.
The HTML looks like this...
</p>
```
<div class="luggage">
    <div class="handle"></div>
</div>
```
<p>This is the YUI instance with the `dd-plugin` module for luggage.</p>
```
YUI().use('dd-plugin', function(Y) {
    var luggage = Y.one('.example .luggage');
    luggage.plug(Y.Plugin.Drag);
    luggage.dd.addHandle('.example .luggage .handle');
});
```
<p>The last rule of CSS for luggage makes the handle pop up.</p>
```
/* Luggage */
.example .luggage{
    position: relative;
    background: url({{{componentAssets}}}/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({{{componentAssets}}}/images/luggage_handle.png) no-repeat;
}
```
<h3>The Full Source</h3>
```
{{>drag-plugin-source}}
```
Something went wrong with that request. Please try again.