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

Question

Welcome To Ask or Share your Answers For Others

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

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - 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 ?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:44:00+0000

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

Categories

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

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

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags