我正在尝试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的情况下拖拽这些标签呢?
发布于 2010-10-20 20:15:36
根据HTML5 Doctor的说法,如果没有JS的帮助,这在火狐中是不会起作用的。
的HTML5规范说,它应该像在相关元素的标记中添加以下属性一样简单:
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(dragItemsi,'dragstart',function (event) { //存储元素的ID,稍后在event.dataTransfer.setData('Text',this.id);});}上收集
https://stackoverflow.com/questions/3977596
复制相似问题