JavaScript拖拽
其实简单的来说，javascript拖拽就是使用鼠标在页面上移动div，不停地更改div到页面左边&顶部的距离。
javascript拖拽的原理特别简单，一共有以下三点：
1.鼠标和DIV的相对距离不变
2.三大事件(onmousedown、onmousemove、onmouseup)
3.把拖拽加到document上
那么，如何计算div到页面左边的距离呢？
当鼠标按下的时候（onmousedown），我们获取
鼠标距离左边&顶部 的值：clientX、clientY
div距离左边&顶部的值：offsetLeft、offsetTop
这样我们就知道了，鼠标距离div左边&顶部的距离，即：clientX - offsetLeft；clientY- offsetTop；
当鼠标移动的时候（onmousemove），我们获取
鼠标距离左边&顶部的值：clientX、clientY
同时鼠标距离物体左边&顶部的值已经计算出了，
那么物体距离左边&顶部的值，就会得出物体的left&top值。
具体的步骤请看下面的代码！！！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
300px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id="div1">
</div>
<script type="text/javascript">
var div = document.getElementById("div1");
div.onmousedown = function(ev){
var e = ev || event;
var divX = e.offsetX;
var divY = e.offsetY;//获取鼠标点击的位置距离div上边缘的距离
document.onmousemove = function(ev){
var e = ev || event;
var X = e.clientX;
var Y = e.clientY;//事件发生时鼠标距离浏览器上边缘的距离
div.style.left = X - divX+"px";
div.style.top = Y - divY+"px";
}
document.onmouseup = function(){
document.onmousemove = null;
}
return false;//取消默认事件
}
</script>
</body>
</html>