logo标签列表

Firefox或IE中未触发拖动事件

javascripthtmldraggable
6

在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元素，以便正确地分派并监听拖动事件？

2个回答
12

在 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)
});

FIDDLE

查看此处以查看拖放类型。

2
当可拖动的元素位于锚点元素内部时，这个功能无法正常工作。 - quarky
0
您的回答可以通过添加补充信息来改进。请进行[编辑]以添加更多细节，例如引用或文档，以便他人可以确认您的答案是否正确。您可以在帮助中心中找到有关撰写良好答案的更多信息。 - Community
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接