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.toElement，它是event.relatedTarget。

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

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

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

有关详细信息，请参阅event.toElement in IE8 and Firefox?。

Answer 2

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

Answer 3

试试这个适用于你的

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

Jquery拖放不在Firefox中工作，在chrome和safari中工作正常

3 个答案: