ansaurus

Question

How to make <div>s in HTML5 draggable for Firefox?

Answer 1

A:

Hi.

The attribute draggable is HTML 5. HTML 5 is not yet supported by the major browsers. You can not accomplish this without the use of Javascript or DHTML (sic).

I recommend implementing it with a common JS Framework like Jquery or Prototype.

Bye

Jan. 2010-10-20 12:12:40

I gather from the question that OP was aware of all of this.

David Hedlund 2010-10-20 12:14:58

Then vote down the question for not being precise. ;)

Jan. 2010-10-20 12:19:31

@Jan: OP says he's playing around with HTML5, and specifically asks for a solution without using jQuery, prototype or any other framework. I'd argue that's rather precise.

David Hedlund 2010-10-21 11:02:27

@David IIRC the question was edited. If I just didn't notice the starting phrase, then I apologize.

Jan. 2010-10-21 19:23:42

Answer 2

+4 A:

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

Skilldrick 2010-10-20 12:15:36

Thank you very much. I also found this site that helped me out:http://www.html5rocks.com/tutorials/dnd/basics/

HdM 2010-10-20 12:52:01

ansaurus

tags:

views:

answers:

How to make <div>s in HTML5 draggable for Firefox?

related questions