解决这个问题要考虑以下几个因素：
1.被拖动的节点是否脱离文档流？
2.整个过程会触发几个事件？
a.被拖动的节点是要脱离文档流，如果不脱离，节点会依照上一个节点来定位，这样就无法实现功能
b.为了实现拖动，基本方法是每次移动，计算出当前节点的left和top值，然后添加到对应节点的style中，对其进行重新的定位和渲染
计算方法：（我们使用div做拖动）
首先需要知道javascript中关于尺寸的属性：
clientWidth是对象看到的宽度（不含边线,即border）
scrollWidth是对象实际内容的宽度（若无padding，那就是边框之间距离，如有padding，就是左padding和右padding之间距离）。
offsetWidth是指对象自身的宽度，整型，单位像素（含边线，如滚动条的占用的宽，值会随着内容的输入而不断改变）。
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
其次：拖动的时候有一个变量是不变的，就是鼠标指针到div的长宽距离是不变的，因此可以使用这个特性计算div所处的left和top值
综上，我们可将整个过程分成三个事件
1.按下鼠标时的事件
这时：指针当前的位置 - div对象所在位置获得那个常量
2.鼠标拖动的事件
这时：a.指针当前的位置 - 上一步骤获得的常量就能得到div对象当前所处位置
b.将得到的值填入到div对象style中，进行重新渲染
3.松开鼠标后的事件
将拖动事件关闭
代码展示：
css:
<style type="text/css">
#box{width: 100px;height: 100px; background-color: red;position: absolute;}
</style>
html:
<div id="box" ></div>
javascript:
<script type="text/javascript">
var box=document.getElementById('box');
box.onmousedown=function (ev) {
//考虑win8兼容性
var ev=ev||window.event;
//获取指针到box对象(div)的left、top距离
var a=ev.clientX-box.offsetLeft;
var b=ev.clientY-box.offsetTop;
document.onmousemove=function (ev) {
var ev=ev||window.event;
//获取当前box的位置
var c=ev.clientX-a;
var d=ev.clientY-b;
if(c<=0){
c=0;
}
if (d<=0) {
d=0;
}
//将得到的值载入
box.style.left=c+'px';
box.style.top=d+'px';
}
}
box.onmouseup=function () {
//将拖动关闭
document.onmousemove=null;
}
</script>
网友评论