Jquery拖放在Firefox中不起作用，在chrome和safari中工作正常答案

【问题标题】：Jquery Drag and drop not working in Firefox, works fine in chrome and safariJquery拖放在Firefox中不起作用，在chrome和safari中工作正常
【发布时间】：2014-09-14 06:16:06
【问题描述】：

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/上传的代码

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

【问题讨论】：

你能为此制作一个小提琴吗？
不是解决办法，但删除逗号 -> helper: "clone",
@devo 代码上传至skmcap63.hostoi.com/box-dashboard
不工作到底是什么意思？没有任何工作或某些事情没有按预期工作？你有什么错误吗？和uut好奇，你为什么使用ev.toElement？？
在drop 回调中，this 将引用该项目被丢弃的元素，你为什么实际使用ev.toElement ??

标签： jquery jquery-ui drag-and-drop draggable droppable

【解决方案1】：

firefox中没有event.toElement，是event.relatedTarget。

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

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

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

请参阅event.toElement in IE8 and Firefox? 了解更多信息。

【讨论】：

@T J 如果我使用 event.relatedTarget 代替 event.toElement 在 chrome 中也不起作用。
@AasimHussainKhan 是的，我提到了它只有firefox，所以如果你只是简单地替换它，它显然不会在其他浏览器中工作。不同的浏览器具有不同的属性，您是否解决了我链接到的问题？你应该在使用它之前确定哪一个存在。

【解决方案2】：

试试这个对你有用

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

【讨论】：

请解释ev.target将如何做OP想要做的事情？
@T J，只需参考您在答案中发布的链接，就可以尝试了。它奏效了。谢谢

【解决方案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());
            } 
        }
    });
});

【讨论】：