Javascript教程:网页拖放实现代码（三）

添加自定义事件
    拖放功能还不能真正的应用起来，除非能知道什么时候拖放开始了。从这点上看，前面的代码没有提供任何方法表示拖动开始、正在拖动或者已经结束。这时，可以使用自定义事件来指示这几个事件的发生，让应用的其它部分与拖动功能进行交互。
    由于DragDrop对象是一个使用了模块模式的单例，所以需要进行一些更改来使用EventTarget类型。首先，创建一个新的EventTarget对象，然后添加enable()和disable()方法，最后返回这个对象。看一下内容：
    这段代码定义了3个事件：dragstart、drag和dragend。它们都将被拖动的元素设置为了target，并给出了x和y属性来表示当前的位置。
    它们触发于dragdrop对象上，之后在返回对象前给对象增加enable()和disable()方法。这些模块模式中的细小更改令DragDrop对象支持了事件，如下：

var EventUtil = { getEvent: function (event) { return event ? event : window.event; }, getTarget: function (event) { return event.target || event.srcElement; }, addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } }, removeHandler: function (element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.detachEvent) { element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } } }; 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) { //获取事件和目标 event = EventUtil.getEvent(event); var target = EventUtil.getTarget(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) { //获取事件 event = EventUtil.getEvent(event); //指定位置 dragging.style.left = (event.clientX - diffX) + "px"; dragging.style.top = (event.clientY - diffY) + "px"; //触发自定义事件 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; } }; //公共接口 dragdrop.enable = function () { EventUtil.addHandler(document, "mousedown", handleEvent); EventUtil.addHandler(document, "mousemove", handleEvent); EventUtil.addHandler(document, "mouseup", handleEvent); }; dragdrop.disabled = function () { EventUtil.removeHandler(document, "mousedown", handleEvent); EventUtil.removeHandler(document, "mousemove", handleEvent); EventUtil.removeHandler(document, "mouseup", handleEvent); } return dragdrop; }(); //启用拖放 DragDrop.enable(); 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 />Dragged " + event.target.id + " at (" + event.x + "," + event.y + ")"; });

    这里，为DragDrop对象每个事件添加了事件处理程序。还是用了一个元素来实现被拖动的元素当前的状态和位置。一旦元素被放下了，就可以看到从它一开始被拖动之后经过的所有的中间步骤。
    为DragDrop添加自定义事件可以使这个对象更健壮，它将可以在网络应用中处理复杂的拖放功能。