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

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

我正在玩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 3.6和4.0b6中,我既不能拖动文本也不能标记它(就像它是通常的文本一样)。这是一个错误还是一个功能?我如何做到这一点,Firefox可以让我拖动这些标签而不使用jQuery?

fengge77fengge77提问于
爱胖次的瓜皮回答于

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

扫码关注云+社区