How to make <div>s in HTML5 draggable for Firefox?
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>
<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 ?
Answer
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); }); }