点击需要拖动元素时，获取该元素的初始位置。
鼠标移动期间 获取元素当前的位置信息
计算
进行事件监听
拖拽的实现原理：通过事件mousedown（事件的触发） →mousemove（事件的控制） →mouseup（事件的清除），拖拽的过程就是mousemove阶段；
问题产生的原因：因为mousemove 的间隔性触发，当两次mousemove事件触发的间隔中，鼠标移动距离出了element的范围，就会产生鼠标脱离element范围，拖拽就停止，
解决方法： 将mousemove事件挂在docment，而不是对应的element，此时鼠标滑动只要不出docment范围就不会触发上述情况。
拖动事件完成的动作时是：mousedown（事件的触发） →mousemove（事件的控制） →mouseup（事件的清除） 但是mouseup的时候 同时会触发 点击事件（如果元素上面有点击事件的话）
处理办法：记录mousedown(记录开始时间) →mousemove→mouseup（记录结束时间） 的时间 根据时间长短判断是进行了点击事件还是进行了拖拽事件。
正常需求的话 就希望拖拽元素只在屏幕的可视范围内进行拖拽，不能跑出去。
在onmousemove 中添加边缘控制就好，具体范围可以根据具体需求更改。
js实现一个拖拽事件的方法：1、定义HTML
<div id="no-drop" class="draggable drag-drop">#无拖动 </div>
<div id="yes-drop" class="draggable drag-drop">#有拖动 </div>
<div id="outer-dropzone" class="dropzone">
#外层拖动
<div id="inner-dropzone" class="dropzone">#内层拖动</div>
</div>
2、定义css
/* 外层样式定义 */
#outer-dropzone {
height: 140px
}
#inner-dropzone {
height: 80px
}
.dropzone {
background-color: #ccc
border: dashed 4px transparent
border-radius: 4px
margin: 10px auto 30px
padding: 10px
width: 80%
transition: background-color 0.3s
}
.drop-active {
border-color: #aaa
}
.drop-target {
background-color: #29e
border-color: #fff
border-style: solid
}
兼容手机和PC的拖拽，只有10多行JS代码
<style>* {
margin: 0
padding: 0
}
#user_cover {
position: fixed
top: 40%
right: 0
width: 4rem
height: 4rem
background-color: rgba(0, 0, 0, 0.3)
}
</style>
<div id="user_cover"></div>
<script>
function onTouchMove(point) {
document.getElementById('user_cover').style.top = (point.changedTouches[0].clientY) + "px"
document.getElementById('user_cover').style.left = (point.changedTouches[0].clientX) + "px"
}
function onMouseDown(point) {
document.onmousemove = function (event) {
document.getElementById('user_cover').style.top = event.clientY+"px"
document.getElementById('user_cover').style.left = event.clientX+"px"
console.log(point)
console.log(event)
}
document.onmouseup = function () {
document.onmousemove = null
document.onmouseup = null
}
}
document.getElementById('user_cover').addEventListener('touchmove', onTouchMove, false)
document.getElementById('user_cover').addEventListener('mousedown', onMouseDown, false)
</script>
