本文共 2543 字，大约阅读时间需要 8 分钟。

HTML拖拽元素实现

下午忙里偷闲想写一个可拖拽的例子，脑海里一直都是三个事件mouseDown,mouseUp,mouseMove，但从未动手实践过。今天终于动手实践，并学习了张鑫旭的demo实现。学习张鑫旭代码的同时，也了解了几点知识点。

获取DOM非行间样式

通过对currentStyle和getComputedStyle的研究，我了解到获取DOM非行间样式有两种方法：obj.currentStyle[attr]和getComputedStyle(obj,false)[attr]。经过百度，发现Chrome和FF不支持currentStyle，因此选择了这两种方法来兼容不同浏览器。

防止内容被选中

在实现onselectstart事件时，发现IE和Chrome默认会阻止内容被选中。为了让拖拽更流畅，我设置onselectstart的返回值为false。

拖拽原理

可拖拽的div元素主要依赖于mouseDown、mouseMove和mouseUp三个事件。首先是确定mouseDown事件发生时的DOM承载对象，以及mouseMove时的坐标计算。其次是当拖拽完成时的DOM承载对象，我选择了document作为承载对象。这个选择是否正确，需要根据实际需求来决定。

拖拽效果图

拖拽后可以看到div元素沿着鼠标移动的方向改变位置。这一效果通过在mouseMove事件中更新target的left和top属性来实现。

JavaScript实现

以下是实现可拖拽效果的JavaScript代码：

/** 拖拽div
 * 关键事件:mouseDown, mouseMove,mouseUp
 */
var params = {
    top: 0,
    left: 0,
    currentX: 0,
    currentY: 0,
    flag: false
};
/** obj.currentStyle[attr] || getComputedStyle(obj,false)[attr] 获取DOM非行间样式 */
var getCss = function(o, key) {
    return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
};
var startDrag = function(bar, target, callback) {
    if (getCss(target, 'left') !== 'auto') {
        params.left = getCss(target, 'left');
    }
    if (getCss(target, 'top') !== 'auto') {
        params.top = getCss(target, 'top');
    }
    bar.onmousedown = function(event) {
        params.flag = true;
        if (!event) {
            event = window.event;
            bar.onselectstart = function() {
                // IE和Chrome适用，防止内容被选中默认是true
                return false;
            }
        }
        var e = event;
        params.currentX = e.clientX;
        params.currentY = e.clientY;
    };
    document.onmouseup = function() {
        params.flag = false;
        if (getCss(target, "left") !== 'auto') {
            params.left = getCss(target, 'left');
        }
        if (getCss(target, 'top') !== 'auto') {
            params.top = getCss(target, 'top');
        }
    };
    document.onmousemove = function(event) {
        var e = event ? event : window.event;
        if (params.flag) {
            var nowX = e.clientX,
                nowY = e.clientY;
            var disX = nowX - params.currentX,
                disY = nowY - params.currentY;
            target.style.left = params.left + disX + 'px';
            target.style.top = params.top + disY + 'px';
        }
        if (callback === 'function') {
            callback(params.left + disX, params.top + disY);
        }
    };
};

总结

通过以上方法，可以轻松实现一个可拖拽的div元素。整个实现过程主要包括获取非行间样式、防止内容被选中以及处理拖拽事件。虽然过程中遇到了一些小问题，但通过查阅资料和不断尝试，最终达成了预期效果。

转载地址：http://stbaz.baihongyu.com/