拖放对象会导致 Firefox 33.1 跳转到无效 URL答案

【问题标题】：Dragging and dropping an object causes Firefox 33.1 to jump to an invalid URL拖放对象会导致 Firefox 33.1 跳转到无效 URL
【发布时间】：2014-11-26 09:30:55
【问题描述】：

已编辑：我之前没有说得足够清楚......

我正在使用 jQuery 和 AngularJS 开发一个应用程序。该应用程序的一部分涉及将一个元素拖放到另一个元素上。问题是当我 srop 元素时，Firefox 会尝试加载一个新的 URL，它告诉我它是无效的。

我已经设法在 Plunker 中复制了这个问题： http://plnkr.co/edit/PGYH67vKp2WoT7xbZTcs?p=preview

JS：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  var dragElement = document.getElementById("dragElement");
  dragElement.addEventListener("dragstart", dragstart);

  var dropBox = document.getElementById("dropBox");
  dropBox.addEventListener("drop", drop);
  dropBox.addEventListener("dragover", dragover);


  function dragstart(e) {
    e.dataTransfer.setData("Text", e.target.attributes["data-drag"].value);
    e.dataTransfer.effectAllowed = "copyMove";
  }

  function dragover(e) {
    e.preventDefault();
  }

  function drop(e) {
    alert("dropped");
  }
});

HTML：

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title><!-- Title here --></title>
    <link data-require="jqueryui" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="jqueryui" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
    <script src="script.js"></script>

  </head>

  <body ng-controller="MainCtrl">

    <div id="dragElement" draggable="true" data-drag="Banana Cake">
    Drag me to the red box in Firefox
</div>

<div id="dropBox"></div>

  </body>

</html>

如果您转到 javascript 的底部到函数 drop(e) 然后注释掉警报，浏览器会尝试转到其他地方。离开警报，页面保持不变。

这只发生在 Firefox 中。 Chrome、IE 和 Opera 运行良好。 Safari 不会让我放弃，但那是另一回事。

非常感谢！

克雷格

【问题讨论】：

我尝试过各种版本的 jQuery 和 Angular。没有区别。
这里有更新！如果我向 data-drag 属性添加一个真实的 URL，Firefox 会去那里，例如data-drag="orf.at"

标签： jquery angularjs jquery-ui firefox

【解决方案1】：

您是否尝试过在 Chrome 中使用 Profiler - 这可以让您深入了解生成请求的位置。但是，对我来说，这听起来像是一个根深蒂固的 Firefox 问题。

编辑：好的，明白了....

你需要添加 e.preventDefault();到拖放功能以及拖动。

【讨论】：

在 console.log 行设置断点很有趣。脚本在那里停了两次。第一次运行正常，第二次运行到新的 URL。在 Chrome 中，它只在该行停止一次。

【解决方案2】：

我遇到了同样的问题：我首先使用了 setData/getData("something", "somethingelse")，它工作得很好（在 Firefox 中，但在 Internet Explorer 中却不行......），然后将“something”替换为“text”。之后，我遇到了你描述的同样的问题。正如 Jon Arnott 建议的那样，在 ondrop 回调中使用 event.preventDefault()（不仅在 ondragover 回调中！）对我有帮助。

【讨论】：