html - 如何在html5中禁用dragend动画

Question

我通过设置其 draggable 属性创建了一个可拖动元素。当我放下元素时，会出现元素弹回到其原始位置的动画:

如何禁用回弹动画？我尝试在 dragend 事件上调用 preventDefault()，但它对动画没有影响。

以下代码段显示了基础知识:

document.getElementById('test').addEventListener(
    'dragend', evt => {
        evt.preventDefault();
    }
);

#container {
  border: 1px solid black;
  
  min-width: 300px;
  min-height: 200px;
  position: relative;
}

#test {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  top: 25px;
  left: 40px;
}

<div id="container">
  <div id="test" draggable='true'></div>
</div>

不是每个浏览器都会显示被拖动的#test跳回到原来的位置。

Answer 1

为了防止动画，您需要触发 drop 事件。要触发 drop 事件，您需要在 dragover 的处理程序中调用 preventDefault()。

document.addEventListener('dragover', function(e) { e.preventDefault() })

MDN 文档中的示例显示了相同的内容:https://developer.mozilla.org/en-US/docs/Web/Events/drop#Example

描述 HTML5 拖放 API 怪癖的旧博客文章:https://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html