主要介绍了如何实现js拖拽效果及原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

元素拖拽分成3个步骤：按下鼠标，移动鼠标，松开鼠标。 拖拽原理：按下拖拽元素后开始监听文档中鼠标移动事件，然后再监听鼠标松开事件；鼠标移动时，元素div要随着鼠标一起移动，需要计算元素div位移的距离（移动的距离=鼠标离可视窗口的位置 – 鼠标在div中相对于左上角的位置）。然后松开鼠标时，删除移动事件和松开事件，元素完成拖拽。 一开始先监听鼠标按下事件mousedown，事件触发执行mouseHandler函数； div.addEventListener(“mousedown”,mouseH