JS中实现拖拽效果

JS拖拽效果
实现拖拽效果方法：利用JS监听鼠标的三个事件，共同配合来实现这个操作
（鼠标按下事件、鼠标释放事件、鼠标按下移动事件）
实现原理：
使用on来监听事件， 例：onmousedown监听鼠标按下事件；onmousemove监听鼠标移动事件；onmouseup监听鼠标释放事件。
例：
首先设置需要拖拽的元素对象样式：需要设置定位，让它脱离文档流

抒写思路：
（1）首先获取到对应元素div

var div=document.querySelector("div");

（2）按下鼠标时，监听鼠标按下事件，执行函数e1：

div.onmousedown=function(e1){

（3）在执行函数e1的情况下，监听鼠标移动事件，执行函数e：

document.onmousemove=function(e){

此时有个问题（如果鼠标是在div上移动的话，那么当鼠标移动距离超过元素长度时，就会造成无法拖拽，那么如果想实现拖拽，就得将当前鼠标相对于可是窗口的坐标赋值给元素的left和top。）
用当前鼠标坐标位置减去这个元素左上角坐标位置。 这样就能保证鼠标相对于元素的位置是固定的。

div.style.left=e.clientX-e1.offsetX+"px";

div.style.top=e.clientY-e1.offsetY+"px";

（4）当鼠标释放时，监听鼠标释放事件，执行函数

document.onmouseup=function(){

释放鼠标，代表鼠标点击和移动事件结束，则需要进行监听事件的删除：

document.onmousemove=null;
document.onmouseup=null;

然后所创建的DIV元素就可以进行拖动了
完成后的代码样式;