Jquery拖放在Firefox中不起作用，在chrome和safari中效果良好

Question

Jquery拖放在Firefox和IE中不起作用，但在chrome和safari中效果良好。

这是我的代码：

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

代码上载于http://www.skmcap63.hostoi.com/box-dashboard/

我需要从侧边栏拖动项目并将其放入框中。请帮忙。提前谢谢。

Answer 1

没有事件。在firefox中，它是event.relatedTarget。

relatedTarget属性用于查找事件中涉及的其他元素（如果有的话）。像mouseover这样的事件是围绕某个目标定向的，但也涉及次要目标，例如当mouseover事件为主要目标触发时退出的目标。

由于不同的浏览器有不同的属性，您应该在使用前检查哪一个存在：

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

查看IE8和Firefox中的event.toElement？了解更多信息。

Answer 2

尝试一下，它将适用于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());
        }
    }
});

Answer 3

此代码将解决您的问题，请注意，我没有在IE中测试此代码，因为我是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());
            } 
        }
    });
});