Please solve this issue

Please solve this issue

Dear all,


I am trying to create DragAndDrop plugin this is my code.

It gives no error nor it functions correctly.
I don't understand what might be the actual problem.
Please solve my issue.

Regard's 
B. Jagadeesh
  1. <html >
    <head><title>
    </title>
    <script type="text/javascript">
    function EventTarget() {
    this.handlers = {};
    };
    EventTarget.prototype = {
    constructor: EventTarget,
    addHandler: function (type, handler) {
    if (typeof this.handlers[type] == "undefined") {
    this.handlers[type] = [];
    }
    this.handlers[type].push(handler);
    },
    fire: function (event) {
    if (!event.target) {
    event.target = this;
    }
    if (this.handlers[event.type] instanceof Array) {
    var handlers = this.handlers[event.type];
    for (var i = 0, len = handlers.length; i < len; i++) {
    handlers[i](event);
    }
    }
    },
    removeHandler: function (type, handler) {
    if (this.handlers[type] instanceof Array) {
    var handlers = this.handlers[type];
    for (var i = 0, len = handlers.length; i < len; i++) {
    if (handlers[i] === handler) {
    break;
    }
    }
    handlers.splice(i, 1);
    }
    }
    };
    var DragDrop = function () {
    var dragdrop = new EventTarget();
    var dragging = null;
    var diffX = 0;
    var diffY = 0;
    function handleEvent(event) {
    //get event and target
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    //determine the type of event
    switch (event.type) {
    case "mousedown":
    if (target.className.indexOf("draggable") > -1) {
    dragging = target;
    diffX = event.clientX - target.offsetLeft;
    diffY = event.clientY - target.offsetTop;
    dragdrop.fire({ type: "dragstart", target: dragging, x: event.clientX, y: event.clientY });
    }
    break;
    case "mousemove":
    if (dragging !== null) {
    //assign location
    dragging.style.left = (event.clientX - diffX) + "px";
    dragging.style.top = (event.clientY - diffY) + "px";
    //fire custom event
    dragdrop.fire({ type: "drag", target: dragging, x: event.clientX, y: event.clientY });
    }
    break;
    case "mouseup":
    dragdrop.fire({ type: "dragend", target: dragging, x: event.clientX, y: event.clientY });
    dragging = null;
    break;
    }
    };
    //public interface
    dragdrop.enable = function () {
    EventUtil.addHandler(document, "mousedown", handleEvent);
    EventUtil.addHandler(document, "mousemove", handleEvent);
    EventUtil.addHandler(document, "mouseup", handleEvent);
    };
    dragdrop.disable = function () {
    EventUtil.removeHandler(document, "mousedown", handleEvent);
    EventUtil.removeHandler(document, "mousemove", handleEvent);
    EventUtil.removeHandler(document, "mouseup", handleEvent);
    };
    return dragdrop;
    } ();
    DragDrop.addHandler("dragstart", function (event) {
    var status = document.getElementById("status");
    status.innerHTML = "Started dragging " + event.target.id;
    });
    DragDrop.addHandler("drag", function (event) {
    var status = document.getElementById("status");
    status.innerHTML += "<br>Dragged " + event.target.id + " to (" + event.x + "," + event.y + ")";
    });
    DragDrop.addHandler("dragend", function (event) {
    var status = document.getElementById("status");
    status.innerHTML += "<br>Dropped " + event.target.id + " at (" + event.x + "," + event.y + ")";
    });
    </script>
    </head>
    <body>


    <div class="draggable" style="position:absolute; width:300px; height:200px; background:red"></div>
    <div id="status"></div>

    </body>
    </html>