js拖拽效果的原理及实现

完成拖拽效果，需要了解几个鼠标坐标：
1、clientX：
clientY：
点击的元素位置相对可视窗口左上角位置
2、 layerX:
layerY:
如果目标元素没有定位 相对页面左上角位置
如果目标元素点位，则是相对目标元素左上角
3、offsetX:
offsetY:
相对目标对象的左上角位置
4、 pageX:
pageY:
点击位置相对页面的左上角位置
5、movementX:
movementY:
移动偏移坐标，主要用在mousemove事件
相较于上一次移动点的坐标，x正数向右，负数向左，y正数向下，负数向上
6、 screenX:
screenY:
点击位置相对屏幕左上角位置
7、 x:
y:
这个与clientX和clientY相同，这个新出
代码：