Drag: A Really Simple Drag Handler : Drag Drop « Mochkit « JavaScript DHTML

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 -->

<html xmlns="http://www.w3.org/1999/xhtml">
    <title>Signal Example</title>
    <style type="text/css">
h1 {
    font-size: 2em;
    color: #4B4545;
    text-align: center;

    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; }
    background: white;
    border: 1px solid black;
    color: black;
    <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) {
        // 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(
        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) {
            Drag._diff(e.mouse().page, Drag._offset));
    _stop: function(e) {

connect(window, 'onload',   
    function() {
            Find all DIVs tagged with the draggable class, and connect them to
            the Drag handler.
        var d = getElementsByTagAndClassName('DIV', 'draggable');
            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;

        Dragging with MochiKit
        This is an example of one might implement a drag handler with
        MochiKit&#8217;s Signal.
        For a detailed description of what happens under the hood, check out
        <a href="draggable.js" class="view-source">draggable.js</a>.
        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>

    <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>



Related examples in the same category

1.Test Drag and drop with MochiKit
2.Drag and Drop Sortable Tables with MochiKit