Drag: A Really Simple Drag Handler

 
<!--
MochiKit is dual-licensed software.  It is available under the terms of the
MIT License, or the Academic Free License version 2.1.  The full text of
each license is included below.
-->

<!-- Code revised from MochiKit demo code -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Signal Example</title>
    <style type="text/css">
h1 {
    font-size: 2em;
    color: #4B4545;
    text-align: center;
}

.draggable
{
    color: white;
    cursor: move;
    font-size: 25px;
    height: 100px;
    line-height: 100px;
    position: absolute;
    text-align: center;
    top: 200px;
    width: 100px;
}

.blue { background: blue; }
.green { background: green; }
.red { background: red; }
.white
{
    background: white;
    border: 1px solid black;
    color: black;
}
    
    </style>
    <script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/MochiKit.js"></script>
    <script type="text/javascript">
/*

    Drag: A Really Simple Drag Handler
    
*/
Drag = {
    _move: null,
    _down: null,
    
    start: function(e) {
        e.stop();
        
        // We need to remember what we're dragging.
        Drag._target = e.target();
        
        /*
            There's no cross-browser way to get offsetX and offsetY, so we
            have to do it ourselves. For performance, we do this once and
            cache it.
        */
        Drag._offset = Drag._diff(
            e.mouse().page,
            getElementPosition(Drag._target));
        
        Drag._move = connect(document, 'onmousemove', Drag._drag);
        Drag._down = connect(document, 'onmouseup', Drag._stop);
    },

    _offset: null,
    _target: null,
    
    _diff: function(lhs, rhs) {
        return new MochiKit.Style.Coordinates(lhs.x - rhs.x, lhs.y - rhs.y);
    },
        
    _drag: function(e) {
        e.stop();
        setElementPosition(
            Drag._target,
            Drag._diff(e.mouse().page, Drag._offset));
    },
    
    _stop: function(e) {
        disconnect(Drag._move);
        disconnect(Drag._down);
    }
};

connect(window, 'onload',   
    function() {
        /*
            Find all DIVs tagged with the draggable class, and connect them to
            the Drag handler.
        */
        var d = getElementsByTagAndClassName('DIV', 'draggable');
        forEach(d,
            function(elem) {
                connect(elem, 'onmousedown', Drag.start);
            });
                        
    });
    
connect(window, 'onload',
    function() {
        var elems = getElementsByTagAndClassName("A", "view-source");
        var page = "draggable/";
        for (var i = 0; i < elems.length; i++) {
            var elem = elems[i];
            var href = elem.href.split(/\//).pop();
            elem.target = "_blank";
            elem.href = "../view-source/view-source.html#" + page + href;
        } 
    });
    
    </script>
</head>
<body>

    <h1>
        Dragging with MochiKit
    </h1>
    <p>
        This is an example of one might implement a drag handler with
        MochiKit&#8217;s Signal.
    </p>
    <p>
        For a detailed description of what happens under the hood, check out
        <a href="draggable.js" class="view-source">draggable.js</a>.
    </p>
    <p>
        View Source: [
            <a href="index.html" class="view-source">index.html</a> | 
            <a href="draggable.js" class="view-source">draggable.js</a> |
            <a href="draggable.css" class="view-source">draggable.css</a>
        ]
    </p>


    <div class="draggable red" style="left: 10px;">R</div>
    <div class="draggable green" style="left: 120px;">G</div>
    <div class="draggable blue" style="left: 230px;">B</div>
    <div class="draggable white" style="left: 340px;">W</div>

</body>
</html>
Related examples in the same category

1.	Test Drag and drop with MochiKit
2.	Drag and Drop Sortable Tables with MochiKit
Drag: A Really Simple Drag Handler : Drag Drop « Mochkit « JavaScript DHTML

Related examples in the same category
