ondragstart not triggering in firefox

问题

Hello I'm trying to use the html drag and drop feature with jquery. I generate my draggable (a button) like this

$("#tb > tbody > tr").append(($("<td>")).append($("<input/>", {type:"button", id:"bt", draggable:"true", value:"test", class:"bt-test"}))).append($("</td>"));

So far, and after reading a bit on the subject, I'm trying to deal with the different events like this :

$(document).on("dragstart", ".bt-test", function(evt)
{
    evt.originalEvent.dataTransfer.setData("text", $(this).val());
    alert(evt.originalEvent.dataTransfer.getData("text"));
    evt.originalEvent.preventDefault();
});
$(document).on('dragenter', function(evt){evt.originalEvent.preventDefault();});
$(document).on('dragleave', function(evt){evt.originalEvent.preventDefault();});
$(document).on('dragover', function(evt){evt.originalEvent.preventDefault();});


// still irrelevant at this point
$(document).on("drop", ".btCase", function(evt)
{
    var data = evt.originalEvent.dataTransfer.getData("text");
    $(this).val(data);
    event.originalEvent.preventDefault();
});

The alert within the dragstart listener shows up just fine on chrome but it doesn't on firefox.

I already tried adding an ondragstart="dragstart_handler(event);" directly into my button as mentionned in https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API but the problem remains. I also tried replacing the event.originalEvent.preventDefault(); with return false();

Any tips?

edit : fiddle > http://jsfiddle.net/Nn4x2/4/

回答1:

This works with a div element, see http://jsfiddle.net/Nn4x2/26/ It seems draggable input buttons are not supported in Firefox. It may be best to use a styled anchor element instead.

This is logged as a Firefox bug for button elements - see https://bugzilla.mozilla.org/show_bug.cgi?id=568313

来源：https://stackoverflow.com/questions/41445158/ondragstart-not-triggering-in-firefox

标签

javascript

jquery

html

drag-and-drop