如何使HTML5中的div适用于Firefox?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (16)

我正在用HTML5功能,并且我希望div可拖动。下面的代码:

<!DOCTYPE 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也可以拖动这些标签?

提问于
用户回答回答于

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

扫码关注云+社区