拖动事件未在 Firefox 或 IE 中触发

Question

在 Chrome 中，拖动事件被触发并记录到控制台。 在 Firefox 和 IE 中，它没有。

<html>
<head>

<style>
  #d {
    width:20px;
    height:20px;
    background-color: red;
  }
</style>

</head>
<body>

<div id="d" draggable="true"></div>

<script>
    d = document.getElementById('d');
    d.addEventListener('dragstart', function(e){
      console.log("dragstart:", e);
    });
    d.addEventListener('drag', function(e){
      console.log("drag:", e);
    });
</script>

</body>
</html>

小提琴版本： http://jsfiddle.net/korimako/e1wqafyr

如何设置一个 div 来发送拖动事件并正确监听它们？

Answer 1

Firefox要求在触发拖动事件之前设置dataTransfer

d = document.getElementById('d');

d.addEventListener('drag', function(e){
    console.log("drag:", e)
});

d.addEventListener('dragstart', function(e){
    e.dataTransfer.setData('application/node type', this);
    console.log("dragstart:", e)
});

小提琴

见这对于拖动类型

Answer 2

作为对@quarky 2018 年评论的更新，截至 2023 年 1 月 10 日，在 Firefox (108.0.1) 中，如果可拖动元素位于锚元素内，则 dragstart() 事件仍然不会触发。

在我的例子中，我的可拖动元素是一个 < img >，我通过删除封闭的 < a href > 并在 < img > 上使用 onclick("window.open(URL, '_blank')") 来解决它。

拖动事件未在 Firefox 或 IE 中触发

问题描述

2 个解决方案

解决方案1
10 已采纳 2015-01-05 22:35:48

解决方案2
-1 2023-01-10 11:09:49

拖动事件未在 Firefox 或 IE 中触发

问题描述

2 个解决方案

解决方案1 10 已采纳 2015-01-05 22:35:48

解决方案2 -1 2023-01-10 11:09:49

解决方案1
10 已采纳 2015-01-05 22:35:48

解决方案2
-1 2023-01-10 11:09:49