How to make s in HTML5 draggable for Firefox?

Question

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:

Answer 1

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