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

文章类别：Javascript | 发表日期:2012-7-9 9:47:58

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添加自定义事件可以使这个对象更健壮，它将可以在网络应用中处理复杂的拖放功能。

下一篇：{实例}Javascript教程:网页拖放实现代码（二） 人气:2015

Javascript视频教程