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

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

Javascript教程：网页拖放实现代码（二）

修缮拖动功能
    当试了上面的例子之后，你会发现元素的左上角总是和指针在一起。这个结果对用户来说有一点不爽，因为当鼠标开始移动的时候，元素好像是突然跳了一下。理想的情况是，这个动作应该看上去好像是这个元素是被指针“拾起”的，也就是说当在拖动元素的时候，用户点击的那一点就是指针应该保持的位置。
    要达到需要的效果，必须做一些额外的计算。需要计算元素左上角和指针位置之间的差值。这个差值应该在mousedown事件发生的时候确定，并且一直保持，直到mouseup事件发生。通过将event的clientX和clientY属性与该元素的offsetLeft和offsetTop属性进行比较，就可以算出水平方向和垂直方向上需要多少空间。

    为了保存x和y坐标上的差值，还需要几个变量。diffX和diffY这些变量需要在onmousemove事件处理程序中用到，来对元素进行适当的定位，如下面的例子所示：

var DragDrop = function () {
        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;
                }
                break;
            case "mousemove":
                if (dragging !== null) {
                    //获取事件
                    event = EventUtil.getEvent(event);
                    //指定位置
                    dragging.style.left = (event.clientX - diffX) + "px";
                    dragging.style.top = (event.clientY - diffY) + "px";
                }
                break;
            case "mouseup":
                dragging = null;
                break;
            }
        };
        //公共接口
        return {
            enable: function () {
                EventUtil.addHandler(document, "mousedown", handleEvent);
                EventUtil.addHandler(document, "mousemove", handleEvent);
                EventUtil.addHandler(document, "mouseup", handleEvent);
            },

            disable: function () {
                EventUtil.removeHandler(document, "mousedown", handleEvent);
                EventUtil.removeHandler(document, "mousemove", handleEvent);
                EventUtil.removeHandler(document, "mouseup", handleEvent);
            }
        }
    }();

//启用拖放
DragDrop.enable();

上一篇：{实例}Javascript教程:网页拖放实现代码（三） 人气:2065
下一篇：{实例}Javascript教程:网页拖放实现代码 人气:2033

Javascript视频教程