I implemented the OpenRico? Drag&Drop with MochiKit, trying to improve it a bit and adjusting it for my needs. It can be customizes easily for giving it more flexibility.

It needs the following modifications in DOM.js, as seen in #4 :

MochiKit.DOM.asEventListener = function (func) {
    return function (e) {
        func.call(this, e || event);
    };
};

MochiKit.DOM.addEventListener = function (element, action, func) {
    var listener = MochiKit.DOM.asEventListener(func);
    element = MochiKit.DOM.getElement(element);
    if (element.addEventListener) {
        element.addEventListener(action, listener, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + action, listener);
    }
    return listener;
};

A simple example :

<!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" xml:lang="en">
  <head>
    <title>Drag and Drop example</title>
    <script type="text/javascript" src="scripts/lib/MochiKit/MochiKit.js"></script>
    <script type="text/javascript" src="scripts/lib/MochiKit/DragAndDrop.js"></script>
  </head>
  <body>
    <div id="drag-1">Drag Me !</div>
    <div id="drag-2">Drag Me too !</div>
    <div id="drop-1">Drop on Me!</div>
    <script type="text/javascript">
    MochiKit.DragAndDrop.registerDraggable(new MochiKit.DragAndDrop.Draggable('drag-1'));
    MochiKit.DragAndDrop.registerDraggable(new MochiKit.DragAndDrop.Draggable('drag-2'));
    MochiKit.DragAndDrop.registerDropZone(new MochiKit.DragAndDrop.DropZone('drop-1'));
    </script>
  </body>
</html>

A full featured example, overriding some functions (it can be seen here:  http://www.nimail.org/docs/model/mailbox_mochi.html) :

    var MailDraggable = function (htmlElement, parentElement, options) {
        this.parentElement = parentElement;
        this.__init__(htmlElement, options);
    };

    MailDraggable.prototype = merge(MochiKit.DragAndDrop.Draggable.prototype, {

        "clear": function() {
            document.getElementById("tbody").removeChild(document.getElementById(this.parentElement));
        },

        "select": function() {
            this.selected = true;

            if (this.showingSelected) {
                return;
            }

            var htmlElement = this.getMouseDownHTMLElement();

            this.saveBackground = MochiKit.Visual.getElementsComputedStyle(htmlElement, "backgroundColor", "background-color");
            htmlElement.style.backgroundColor = "transparent";
            this.showingSelected = true;
        },

        "getObjectDragGUI": function() {
            return this.htmlElement.cloneNode(true);
        }
    });

    var FolderDropZone =  function(htmlElement, options) {
        this.__init__(htmlElement, options);
    }

    FolderDropZone.prototype = merge(MochiKit.DragAndDrop.DropZone.prototype, {

        "accept": function(draggableObjects) {
            for (var i = 0; i < draggableObjects.length; i++ ) {
                draggableObjects[i].clear();
            }
        }
    });

    MochiKit.DragAndDrop.registerDraggable(new MailDraggable('drag-1', 'tr-1'));
    MochiKit.DragAndDrop.registerDraggable(new MailDraggable('drag-2', 'tr-2'));
    MochiKit.DragAndDrop.registerDropZone(new FolderDropZone('drop-1', {'hoverClass': 'drop-hover'}));

Attachments