原生JS代码实现拖动Div拖动效果

第一步我们得搞清楚拖动div效果的原理，不外乎3个步骤：①鼠标按下标记元素为可拖动状态，并且记下鼠标当前位置的偏移；②鼠标开始移动，要检测登录浮层是否可以标记为移动，如果是则更新元素位置到当前鼠标的位置；③放开鼠标后，元素变为不可拖动状态

第二步，搞清楚原理之后我们就可以开始尝试了，动手之前，我们先封装一下函数来简化操作：function get(id){ return document.getElementById(id); }

第三步，首先创建一个可以拖动的元素，运用基础的div+css构建即可；其中，很重要的一步一定要设置需要拖动元素的position为absolute。

第四步，开始创建鼠标事件的第一个函数获取鼠标的当前位置坐标以备后用。

第五步，创建鼠标事件的第二个函数侦探鼠标的移动距离，并改变需要拖动元素的left、top值来实现拖动效果。

第六步，创建鼠标事件的第三个函数，当鼠标放开时标记元素为不可拖动状态。

总结：总的来说，div拖动的原理并不难，只需要记录下鼠标移动的距离，然后再动态及时更改需要拖动元素的left、top值即可。

最后说两句，代码如上所示，三个函数就可以搞定，如果各位看官有任何疑问欢迎私信讨论！最后如果看官觉得还不错，希望得到各位的顺手点赞打赏哦！