HTML5 Drag5 event did not fire in firefox

Question

I make some changes when starting a drag and drop and want to return them if the crash failed. I wrote this logic in a function called dragend . This works fine in Chrome , but in Firefox the Dragend event does not fire.

Can someone tell me something about this behavior? I am using firefox 22.0 on ubantu.

Code below

$(".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

Try this instead.

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

Basically bind javascript event to html itself.

Answer 2

In Firefox, you need to set the drag and drop data ( event.dataTransfer.setData(...) ) in the dragstart . Without setting this data, the dragstart event will occur, but the dragend event dragend not.

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

To make another HTML element draggable, you need to do three things:

• Set the draggable attribute to true for the item you want to drag.
• Add a listener for the dragstart event
• Set the drag and drop data in the above listener.

Example:

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

Answer 3

It is worth adding that Firefox has an error that causes the dragend to not work if you move or delete DOM elements as part of the Drag and Drop functionality.

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

Moving the DOM manipulations to my method called by dragend solved this problem for me.