HTML5 Dragend事件在firefox中没有触发

Question

我正在对拖动开始做一些更改,并希望在drop失败时还原它们.我在dragend触发的函数中编写了这个逻辑.这完美的作品在Chrome浏览器,但火狐 "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要求在事件中设置拖动数据(event.dataTransfer.setData(...))dragstart.如果不设置此数据,dragstart事件将触发,但事件不会触发dragend.

https://developer.mozilla.org/en-US/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>

Answer 2

试试这个.

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

基本上绑定html本身的javascript事件.