HTML5的Dragend事件在火狐浏览器中未触发

Question

我正在对拖动开始时进行一些更改，如果放置失败，我希望能恢复它们。我将这个逻辑写在由dragend触发的函数中。这在Chrome中完美运行，但在Firefox中，“dragend”事件不会被触发。

有人能告诉我这种行为的原因吗？我正在Ubuntu上使用Firefox 22.0。

代码如下：

    $(".view-controller").on("dragover", that.dragOverMain);
    $(".view-controller").on("dragenter", that.dragEnterMain); 
    $(".view-controller").on("dragexit dragleave", that.dragExitMain);
    $(".view-controller").on("dragend", that.dragEndMain);       
    $(".view-controller").on("drop", that.dropMain);

    $(".view-controller").children().on("dragstart", function(e) {
        that.dragStartChild(e);
    });
    $(".view-controller").children().on("dragend", function(e) {
        that.dragEndMain(e);
    }); 

    dragStartChild: function(e) { console.log('dragStartChild'); },
    dragEndMain: function(e) { console.log('dragEndMain'); e.preventDefault(); },
    dropMain: function(e) { console.log('dropMain'); e.preventDefault(); },
    dragExitMain: function(e) { console.log('dragExitMain'); e.preventDefault(); },
    dragEnterMain: function(e) { console.log('dragEnterMain'); e.preventDefault(); },
    dragOverMain: function(e) { console.log('dragOverMain'); e.preventDefault(); },

- Sauryabhatt

---

也许可以参考这个链接：https://dev59.com/KGbWa4cB1Zd3GeqPUjoP#11531582 顺便问一下，为什么不提供相关的代码呢？一个 jsfiddle 链接会更好... - A. Wolff

谢谢你的回复，但我已经使用了preventDefault并且它仍未被调用，可能是我编辑过代码中的其他部分引起的。 - Sauryabhatt

还注意到，在火狐浏览器中，按下“Esc”键会取消拖动，但在谷歌浏览器中不行。 - Sauryabhatt

至少将你的 ev.preventDefault(); 更改为 e.preventDefault();，因为你把事件变量命名为 e。 - putvande

这是伪代码，就像常规函数一样，我使用了一个不同的变量ev，它保存了事件，如mozila和其他浏览器中的e.orignalevent。 - Sauryabhatt

请参见 https://dev59.com/yGMl5IYBdhLWcg3wmn_R。 - mert

Answer 1

Firefox要求在dragstart事件中设置拖动数据(event.dataTransfer.setData(...))。如果不设置这些数据，dragstart事件将会触发，但dragend事件不会触发。

https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#dragstart:

要使另一个HTML元素可拖动，必须完成三件事：

1. 在要使其可拖动的元素上将draggable属性设置为true。
2. 添加dragstart事件侦听器。
3. 在上述定义的侦听器内设置拖动数据。

示例：

<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
  This text <strong>may</strong> be dragged.
</div>

- K Scandrett

Answer 2

请尝试使用这个：

<div ondragend="dragEndMain(event)" class="viewcontroller">
<!-- some html -->
</div>

基本上在html中绑定javascript事件。

- nitish koundade

Answer 3

值得注意的是，如果您在拖放功能中移动或删除DOM元素，Firefox存在一个导致dragend事件不触发的错误。 移动DOM操作到我的dragend方法中解决了这个问题。 https://bugzilla.mozilla.org/show_bug.cgi?id=460801

- kgstew