📌  相关文章
📜  HTML | ondragend 事件属性(1)

📅  最后修改于: 2023-12-03 15:01:14.479000             🧑  作者: Mango

HTML | ondragend 事件属性

ondragend 事件属性是在用户完成拖动元素后触发的事件。当拖动一个元素并释放鼠标或触摸屏幕时，ondragend 事件将被触发。

语法
<element ondragend="myFunction()">
参数
  • myFunction：当事件被触发时要被调用的函数名称。
示例
<!DOCTYPE html>
<html>
  <body>
    <div draggable="true" ondragstart="dragStart(event)" ondragend="dragEnd(event)">Drag me!</div>
    <script>
      function dragStart(event) {
        event.dataTransfer.setData("text", event.target.innerHTML);
      }
      function dragEnd(event) {
        alert("Drag has ended!");
      }
    </script>
  </body>
</html>

在上面的示例中，当拖动 div 元素并释放鼠标时，会触发 dragEnd 函数并显示一个弹窗提示信息。

注意事项
  • ondragstart 和 ondragend 事件属性必须和 draggable 属性结合使用，否则将不会触发事件。
  • 当 draggable 属性的值为 false 时，无法触发 ondragstart 和 ondragend 事件。
  • 如果需要在拖动过程中改变元素的位置，则应该使用 ondrag 事件。