如何使 HTML5 中的 <div> 可以为 Firefox 拖动？答案

【问题标题】：How to make <div>s in HTML5 draggable for Firefox?如何使 HTML5 中的 <div> 可以为 Firefox 拖动？
【发布时间】：2011-04-28 00:22:27
【问题描述】：

我正在使用 HTML5 功能，并且我希望 div（以及类似的容器，如文章、部分等）是可拖动的。考虑以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>A Simple Draggable Object</title>
</head>

<body>
    <h1>Test #1: A Simple Draggable Object</h1>
    <div draggable="true">This text should be draggable.</div>
</body>
</html>

我在 OS X 中测试了以下浏览器：在 Chrome 7.0 和 Safari 5.0.2 中，我可以成功拖动文本，但在 Firefox 3.6 和 4.0b6 中，我既不能拖动文本也不能标记它（就好像它是普通文本一样）。这是错误还是功能？我如何实现 Firefox 让我使用 jQuery 拖动这些标签？

【问题讨论】：

标签： firefox html draggable

【解决方案1】：

根据HTML5 Doctor，如果没有一些 JS 帮助，这在 Firefox 中是行不通的。

HTML 5 规范说它应该是只需添加以下内容即可标记的属性有问题的元素：
draggable="true"
但是，这并不完全有效适用于 Safari 或 Firefox。对于 Safari 你需要将以下样式添加到元素：
[draggable=true] {
  -khtml-user-drag: element;
}
这将开始在 Safari 中运行，并且当你拖动它时，它会设置一个默认值，带有 dataTransfer 的空值目的。但是，Firefox 不允许你拖动元素，除非你手动设置一些数据来配合它。为了解决这个问题，我们需要一个dragstart 事件处理程序，我们会给它一些要拖动的数据：
var dragItems = document.querySelectorAll('[draggable=true]');

for (var i = 0; i < dragItems.length; i++) {
  addEvent(dragItems[i], 'dragstart', function (event) {
    // store the ID of the element, and collect it on the drop later on

    event.dataTransfer.setData('Text', this.id);
  });
}

【讨论】：

非常感谢。我还发现了这个帮助我的网站：html5rocks.com/tutorials/dnd/basics
很好的问答！我在使用 jquery 进行数据传输时遇到问题。有什么想法吗？
对于在使用 jQuery 时想知道上述问题的人来说，它似乎是：event.originalEvent.dataTransfer.setData('Text', this.id)
当我尝试添加或不添加 setData 时，Firefox 会尝试根据 setData 中的 id 导航到另一个站点。