Question

编辑：我之前没有说清楚......

我正在使用jQuery和AngularJS开发一个应用程序。该应用程序的一部分涉及拖动元素并将其放到另一个元素上。问题是当我搜索元素时，Firefox会尝试加载一个新的URL，它告诉我该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不会让我放弃，但这是一个不同的故事。

非常感谢！

克雷格

Answer 1

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

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

您需要添加e.preventDefault（）;跌落功能以及牵引器。

Answer 2

我有同样的问题：我首先使用了setData / getData（＆＃34;＆＃34;，＆＃34; somethingelse＆＃34;），它完美地工作（在Firefox中，但不在Internet Explorer中......），然后替换了＃34;东西＆＃34;通过＆＃34; text＆＃34;。在那之后，我遇到了你描述的同样的问题。正如Jon Arnott建议的那样，在ondrop回调中使用event.preventDefault（）（不仅仅是在ondragover回调中！）帮助了我。

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

2 个答案: