Example: Drag - Node plugin

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>