如何在HTML5中禁用Dragend动画 [英] how to disable dragend animation in html5

问题描述

html是

 < div id = test draggable =‘true’>< / div> 
  

我可以拖动该div，但是当我放下该元素时，会出现一个动画，该元素返回到其原始位置

如何禁用此动画？
我在dragend事件中使用了preventDefault（），它不能正常工作吗？

我的英语水平不太好，非常感谢

解决方案

为了防止动画，您需要触发 drop 事件。为了触发 drop 事件，您需要在处理程序中为调用 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

html is

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

and I can drag this div,but when I drop the element, there is a animation that element back to it's origin position

how to disable this animate? I use preventDefault() in dragend event, it not working?

My English is not vert good ,thank you very much

解决方案

In order to prevent the animation, you need the drop event to fire. For the drop event to fire, you need to call preventDefault() in the handler for dragover.

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

Example in MDN docs shows the same thing: https://developer.mozilla.org/en-US/docs/Web/Events/drop#Example

An old blog post describing the quirks of HTML5 Drag and Drop API: https://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html

这篇关于如何在HTML5中禁用Dragend动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！