欢迎点击「算法与编程之美」↑关注我们！
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
1 问题描述最近学习js的过程中了解到拖拽事件，鼠标拖拽效果常见于用户自定义展示页面，比如qq空间，x宝店铺装修等，操作灵动，所见即所得；或者是一个简单modal移动效果，方便用户查看原网页的内容。那么怎么灵活的实现鼠标的拖拽呢？
2 问题分析在接触到这类问题时，首先是查阅相关博客，要有一个解答的基本思路，切忌盲目敲代码，实现鼠标的拖拽主要分为三个步骤：
1. onmousedown：鼠标按下事件，获取鼠标点击时在div中的相对位置。
2. onmousemove：鼠标移动事件，元素的位置 = 就是鼠标的位置 - 刚才的差值。
3. onmouseup：鼠标抬起事件，给鼠标移动和鼠标放开赋值null，除非再次点击，否则不会有任何移动效果。
拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然，并不是任何时候移动鼠标都要造成元素的移动，而应该判断鼠标左键的状态是否为按下状态，是否是在可拖拽的元素上按下的。
3 解决方案先设置div的样式
