Sauryabhatt Sauryabhatt - 1 year ago 64
Javascript Question

HTML5 Dragend event didn't fire in firefox

I am making some changes on drag start and want to revert them if drop fails. I wrote this logic in a function triggered by dragend. This works perfect in Chrome but in firefox 'Dragend' event is not fired.

Can anyone tell me something about this behaviour? I am using firefox 22.0 on ubantu.

Code is as 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 Source

Try this instead.

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

Basically bind the javascript event in html itself.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download