本文共 2486 字，大约阅读时间需要 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/