HTML 设置 div 元素任意拖动效果

小渣渣

需求：HTML 网页有个工具条，可以根据用户的习惯，允许用户随意拖动到想要的位置。

首先效果图如下：



HTML 元素通过设置 draggable 属性为 true 可以让该元素任意拖动，但是释放鼠标后元素又会回到原来的位置。

可以通过添加 dragend 事件来完成释放鼠标后，将元素移动到拖动后的位置。

附上源码：

登录可见。

在拖动目标上触发事件 (源元素):

ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:

ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

参考：

【转】使用 HTML5 拖放 API
https://www.itsvse.com/thread-10299-1-1.html

飞鱼

又来学习学习

上雨

学习，学习