HdM*_*HdM 27 firefox html5 draggable
我正在玩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的情况下拖拽这些标签？
Ski*_*ick 64
根据HTML5 Doctor的说法,如果没有JS帮助,这将无法在Firefox中使用.
HTML 5规范说它应该像将以下属性添加到相关元素的标记一样简单:
Run Code Online (Sandbox Code Playgroud)draggable="true"但是,对于Safari或Firefox,这不起作用.对于Safari,您需要将以下样式添加到元素:
Run Code Online (Sandbox Code Playgroud)[draggable=true] { -khtml-user-drag: element; }这将在Safari中开始工作,当您拖动时,它将使用dataTransfer对象设置默认的空值.但是,除非您手动设置一些数据,否则Firefox将不允许您拖动元素.要解决这个问题,我们需要一个dragstart事件处理程序,我们将为它提供一些数据来拖动:
Run Code Online (Sandbox Code Playgroud)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); }); }