第一步
首先简单分析下需求吧，我们就是想实现鼠标拖拽带颜色的方块时，让方块停留在鼠标松开的位置，需要计算的就是拖拽前的坐标和拖拽后的坐标，鼠标移动后相对于原位置的偏移量=目标元素的偏移量，根据这个等式和几个属性实现拖拽（下面会介绍到这几个属性，莫急哈，后面还会遇到一个小问题，一会详细描述），鼠标的状态事件有三种，鼠标按下时的事件（mousedown）,鼠标移动时的事件（mousemove）,鼠标松开时的事件（mouseup）
第二部
这里就是撸代码了，首先新建一个html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#div{
position: absolute;
width:100px;
height: 100px;
background-color: deeppink;
}
</style>
<body style="border:1px solid #000;height: 600px;margin:0">
<div id="div"></div>
<script>
let tar=document.getElementById('div')
let isDrag=false;
tar.onmousedown=function(el){
var el= el || event;
isDrag=true
if(isDrag){
document.onmousemove=function(e){
var e = e || event;
tar.style.left= e.clientX - el.offsetX + 'px';
tar.style.top= e.clientY - el.offsetY + 'px';
}
} else {
return
}
document.onmouseup=function(){
isDrag=false;
// tar.onmousedown=null;
document.onmousemove=null
document.onmouseup=null
}
} </script>
</body>
</html>
这里时完整的代码，我一步一步的来解释
（1）<body style="border:1px solid #000;height: 600px;margin:0">这段代码起了个初始化的作用，（因为谷歌浏览器会默认给body加8px的margin）border加不加无所谓，我加上是方便看一下边界；
（2）position: absolute; 样式中的这个东西不能缺，因为只用元素定位了之后才能使用top和left属性；
（3）页面中的isDrag就相当于一个开关，只有当为true的时候才允许拖拽（也就是鼠标按下的时候才能拖拽，松开时isDrag自动变为false,mousemove事件就不能触发了）
（4）var e = e || event（window.event）; 这行代码其实也很好理解，就是为了兼容,它就相当于一个函数中运用三目给e重新赋值,
(function(event){
var e = event ? event : window.event
})()
这样理解就简单了，上面说了个小问题是啥，现在可以揭晓了，把页面中的var 换成let试一下，
浏览器控制台报了一行错，如下
Uncaught SyntaxError: Identifier 'el' has already been declared
（星星个b的），咋报错了，为啥啊，咋回事啊？ 赶紧百度一下压压惊，
不废话了，简单解释下，这里涉及到两个知识点：函数的形参以及let和var声明变量的区别，函数的形参也是函数作用域的参数，也就是函数调用后形成的局部作用域内的参数，它不属于全局哦，也就相当于使用let声明了这个参数，有人会问了，用var咋就可以呢，咋就不报错呢，因为var声明的变量会覆盖掉同名变量(也就是覆盖了形参)，不要杠为啥覆盖，js就是这么定义的，百度下答案都是大同小异，王八的屁股--龟腚（规定），
tar.style.left= e.clientX - el.offsetX + 'px';
tar.style.top= e.clientY - el.offsetY + 'px'; 这两行代码就是计算元素的left和top的代码，position天天用，top和left不难理解，e.clientX就是鼠标终点距离div左边的垂直距离，e.clientY就是距离div上边的垂直距离，
el.offsetX 是div距离浏览器左边的距离，el.offsetY 是距离浏览器页面显示区的距离，页面显示区的上边，标签栏下面，有一条灰边，鼠标动的时候这四个值也是在不断变化的，只要设置一下div的top和left就能实现简单的拖拽功能了
（5）mouseup事件是释放空间，节约内存。
这样就完成了一个简单的拖拽。后面再一起学习复杂拖拽（比方说，限制范围，拖拽生成新的等等）
document.onmouseup=null
