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(); },

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(); },

• javascript
• jquery
• html
• drag-and-drop

• Maybe: stackoverflow.com/a/11531582/1414562 BTW, why not providing your relevant code? A jsfiddle would be nice... – A. Wolff Commented Aug 6, 2013 at 9:59
• 1 Thanks Roasted but I already have applied prevent Default and its not calling, it might be something else I have edited the code in this – Sauryabhatt Commented Aug 6, 2013 at 10:51
• 1 Also noticed that esc key cancels drag in mozila but can't in chrome – Sauryabhatt Commented Aug 6, 2013 at 10:53
• 1 At least change your ev.preventDefault(); to e.preventDefault(); since you name your event variable e. – putvande Commented Aug 6, 2013 at 11:23
• 1 This is a psuedo code as in regular function i have taken a diffrent variable ev which holds either the event as in mozila and e.orignalevent in others – Sauryabhatt Commented Aug 6, 2013 at 11:28

3 Answers 3

Firefox requires drag data to be set (event.dataTransfer.setData(...)) in the dragstart event. Without setting this data the dragstart event will fire, but the dragend event won't.

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.

Example:

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

Try this instead.

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

Basically bind the javascript event in html itself.

Worth adding here that Firefox has a bug that causes dragend to not fire if you're moving or deleting DOM elements as a part of your Drag and Drop functionality.

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

Moving the DOM manipulations into my method called on dragend solved this problem for me.