Question

我正在使用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拖动这些标签？

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

如何让HTML5中的<div> s可以为Firefox浏览？</div>

1 个答案: