javascript - HTML5 Dragend 事件没有在 Firefox 中触发

Question

我正在对拖动开始进行一些更改，如果拖放失败，我想恢复它们。我把这个逻辑写在一个由 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(); },

Answer 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 :

To make another HTML element draggable, three things must be done:

1. Set the draggable attribute to true on the element that you wish to make draggable.
2. Add a listener for the dragstart event
3. Set the drag data within the listener defined above.

示例:

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