Jquery Drag and drop not working in Firefox, works fine in chrome and safari

问题

Jquery Drag and drop not working in Firefox and IE, but works fine in chrome and safari.

This is my code:

$(".drag").draggable({
    helper: "clone",
});

$(".drop").droppable({
  drop: function (ev, ui) {
    if ($(ev.toElement).hasClass("drop") == true) {
      var widgetId = $(ui.draggable).attr("id");
      $(ev.toElement).attr("id", "dash_" + widgetId);
      $(ev.toElement).html($(ui.draggable).html());
    }
  }
});

Code uploaded at http://www.skmcap63.hostoi.com/box-dashboard/

I need to drag the items from sidebar and drop it into boxes. Please help. Thanks in advance.

回答1:

Try this it will work for u

$(".drop").droppable({
    drop: function (ev, ui) {
        if ($(ev.target).hasClass("drop") == true) {
            var widgetId = $(ui.draggable).attr("id");
            $(ev.target).attr("id", "dash_" + widgetId);
            $(ev.target).html($(ui.draggable).html());
        }
    }
});

回答2:

There is no event.toElement In firefox, it is event.relatedTarget.

The relatedTarget property is used to find the other element, if any, involved in an event. Events like mouseover are oriented around a certain target, but also involve a secondary target, such as the target that is exited as the mouseover event fires for the primary target.

Since different browsers have different properties, You should check which one exists before using it:

var el = ev.toElement? ev.toElement: ev.relatedTarget;

See event.toElement in IE8 and Firefox? for more info.

回答3:

This code will solve your issue, please note that I didn't tested this in IE because am a Unixmen.

$(function() {
    $(".drag").draggable({
        helper: "clone",
    });

    $(".drop").droppable({
        drop: function(ev, ui) {
            var el = ev.toElement? ev.toElement: ev.target;
            if ($(el).hasClass("drop") == true) {
                var widgetId = $(ui.draggable).attr("id");
                $(el).attr("id", "dash_" + widgetId);
                $(el).html($(ui.draggable).html());
            } 
        }
    });
});

来源：https://stackoverflow.com/questions/25830615/jquery-drag-and-drop-not-working-in-firefox-works-fine-in-chrome-and-safari