我们执行拖拽操作时，
1.按住某元素
2.移动鼠标
3.移动鼠标到相应位置后松开鼠标
基于以上操作，页面拖拽效果需要三个事件
- onmousedown
- onmousemove
- onmouseup
在onmousedown事件中，我们需要定义函数表明，该元素被按住，即将进行移动操作，需要计算x坐标值，并触发后续的onmousemove事件。
在onmousemove事件中，我们需要计算元素坐标位置，根据鼠标移动改变元素位置，准备执行鼠标松开时的事件函数。
在onmouseup事件中，我们需要以最终鼠标确定的位置为元素的最终位置，并且终止onmousemove事件。
注意：常规流元素不能够自由移动位置，设置定位后可以通过left,top等属性移动位置。
位置计算需要clientX,clientY,offsetX,offsetY等事件相关属性。
如果将left的值直接设置为event.clientX的话，鼠标位置在哪里，元素的最左侧就会跟着鼠标在哪里。这样的话，鼠标位置永远都是元素左侧。在按下鼠标时计算鼠标与元素位置的差值，然后在后续onmousemove处理中把这个差值加上，就可以使鼠标位置达到元素内部，并且在移动过程中不会改变。
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#di{
width:100px;
height:100px;
background-color: #4c4c4c;
position: relative;
/*设置绝对定位或者相对定位是必要的*/
}
</style>
<script>
//window.onload=function(){}这里是为了使html页面加载完毕后再加载js代码，
//否则获取元素步骤发生在元素产生之前，元素获取会失败
window.onload=function(){
//获取元素
var d2=document.getElementById("d2");
//以下为函数主体部分
di.onmousedown=function(){
//这里解释：event.clientX是鼠标位置相对于浏览器窗口左上角的差距像素值
//offsetLeft是事件元素相对于浏览器窗口的定位位置,如果被某个定位元素包含，left会相对于那个定位元素，而不是document页面
var disx=event.clientX-di.offsetLeft;
var disy=event.clientY-di.offsetTop;
//以下内容看不懂可以直接注释掉正常实现方式，使用发生跳跃的实现方式，然后就会发现
//这里在按下鼠标时记录鼠标位置相对于元素的位置的差,防止每次开始拖拽时鼠标位置突然变成元素的一边。
//这里设置left值为event.clientX,就可以看到不协调的元素跳跃，下面通过注释代码可以直接看到效果
document.onmousemove=function(){
di.style.left=event.clientX-disx+"px";//这里是正常表现效果的实现方式
// di.style.left=event.clientX+"px";//这里是发生跳跃的不恰当的实现方式
di.style.top=event.clientY-disy+"px";
};
document.onmouseup=function(){
document.onmousemove=null;
//这里把移动元素的状态去掉，停止拖拽。
}
}
}
</script>
</head>
<body>
<div id="di">
</div>
</body>
</html>
