HTML5 Dragend 事件在 Firefox 中未触发答案

【问题标题】：HTML5 Dragend event didn't fire in firefoxHTML5 Dragend 事件在 Firefox 中未触发
【发布时间】：2013-08-06 09:56:58
【问题描述】：

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

谁能告诉我一些关于这种行为的事情？我在 ubantu 上使用 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(); },

【问题讨论】：

也许：stackoverflow.com/a/11531582/1414562 BTW，为什么不提供您的相关代码？一个jsfiddle会很好......
感谢 Roasted，但我已经应用了 prevent Default 并且它没有调用，这可能是我在此编辑代码的其他内容
还注意到 esc 键取消了 mozila 中的拖动，但不能在 chrome 中进行
至少将您的ev.preventDefault(); 更改为e.preventDefault();，因为您将事件变量命名为e。
这是一个伪代码，因为在常规函数中我采用了一个不同的变量 ev，它保存了 mozila 中的事件和其他中的 e.orignalevent

标签： javascript jquery html drag-and-drop

【解决方案1】：

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

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#dragstart:

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

在您希望使其可拖动的元素上将可拖动属性设置为 true。

为 dragstart 事件添加监听器

在上面定义的监听器中设置拖动数据。

示例：

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

【讨论】：

【解决方案2】：

试试这个。

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

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

【讨论】：

【解决方案3】：

值得在这里补充一点，Firefox 有一个错误，如果您在拖放功能中移动或删除 DOM 元素，该错误会导致 dragend 不会触发。

https://bugzilla.mozilla.org/show_bug.cgi?id=460801

将 DOM 操作移动到我在 dragend 上调用的方法中为我解决了这个问题。

【讨论】：