如何使HTML5中的< div>可以在Firefox中使用？ [英] How to make <div>s in HTML5 draggable for Firefox?
问题描述
<！DOCTYPE html>
< head>
< title>简单的可拖曳对象< / title>
< / head>
< body>
< h1>测试＃1：简单的可拖曳对象< / h1>
< div draggable =true>这段文字应该是可拖动的。< / div>
< / body>
< / html>
我在OS X中测试了以下浏览器：
在Chrome 7.0和Safari 5.0.2我可以成功拖动文本，但是在Firefox 3.6和4.0b6中，我既不能拖动文本也不能标记它（就好像它是通常的文本一样）。这是一个错误还是一个功能？
我该如何做到这一点，Firefox让我可以在没有使用jQuery的情况下拖动这些标签
<根据 HTML5 Doctor ，如果没有一些JS帮助，这将无法在Firefox中工作。
$ b
HTML 5规范认为它应该像
一样简单，因为将以下
属性添加到标记
元素问题：
draggable =true
然而，这对于Safari或Firefox完全无效
。对于Safari，您
需要将以下样式添加到
元素：
[draggable = true] {
-khtml-user-drag：element;
$ / code>这将在Safari中启动，
在您拖动将使用dataTransfer
对象设置默认的
空值。但是，Firefox不会允许
拖动元素，除非
手动设置了一些数据。
为了解决这个问题，我们需要一个dragstart
事件处理程序，我们将给它一些
的数据来拖动：
var dragItems = document.querySelectorAll（'[draggable = true]'）; （var i = 0; i< dragItems.length; i ++）{
addEvent（dragItems [i]，'dragstart'，function（event）{
/ /存储元素的ID，然后在
event.dataTransfer.setData（'Text'，this.id）;
}）;
}
I am playing around with the HTML5 features, and I want div's (and similar containers like articles, sections, etc.) to be draggable. Consider the following code:
<!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>
I tested in OS X the following browsers: In Chrome 7.0 and Safari 5.0.2 I can successfully drag the text around, but in Firefox 3.6 and 4.0b6 I can neither drag the text nor mark it (as if it was usual text). Is this a bug or a feature? How do I achieve that Firefox lets me drag around these tags without using jQuery ?
According to HTML5 Doctor, this won't work in Firefox without some JS help.
The HTML 5 spec says it should be as simple as adding the following attributes to the markup of the elements in question:
draggable="true"However, this doesn’t work completely for Safari or Firefox. For Safari you need to add the following style to the element:
[draggable=true] { -khtml-user-drag: element; }This will start working in Safari, and as you drag it will set a default, empty value with the dataTransfer object. However, Firefox won’t allow you to drag the element unless you manually set some data to go with it. To solve this, we need a dragstart event handler, and we’ll give it some data to be dragged around with:
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>可以在Firefox中使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
