如何使HTML5中的<div>元素在Firefox中可拖动？

Question

如何使HTML5中的<div>元素在Firefox中可拖动？

29

我正在尝试使用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中，我既不能拖动文本，也无法标记它(就像是普通文本一样)。这是一个bug还是特性？
如何在不使用jQuery的情况下实现Firefox让我拖动这些标签？

- HdM

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Skilldrick · Accepted Answer

根据HTML5 Doctor的说法，在Firefox中这种方法需要一些JS的帮助才能生效。

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);
  });
}