Как сделать <div>с в HTML5 перетаскиваемым для Firefox? - PullRequest
Новая
       33

Как сделать <div>с в HTML5 перетаскиваемым для Firefox?

26 голосов
/ 20 октября 2010

Я играю с функциями HTML5 и хочу, чтобы div (и подобные контейнеры, такие как статьи, разделы и т. Д.) Можно было перетаскивать.Рассмотрим следующий код: 

<!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>

Я протестировал в OS X следующие браузеры: в Chrome 7.0 и Safari 5.0.2 я могу успешно перетаскивать текст, но в Firefox 3.6 и 4.0b6 я не могу ни перетащитьтекст, ни пометьте его (как если бы это был обычный текст).Это ошибка или особенность?Как мне добиться, чтобы Firefox позволял мне перетаскивать эти теги без с помощью jQuery?

1 Ответ

62 голосов
/ 20 октября 2010

Согласно HTML5 Doctor , это не сработает в Firefox без помощи JS.

Спецификация HTML 5 говорит, что это должно быть как просто добавив следующее атрибуты разметки рассматриваемые элементы: 

draggable="true"

Однако, это не работает полностью для Safari или Firefox. Для сафари ты необходимо добавить следующий стиль элемент: 

[draggable=true] {
  -khtml-user-drag: element;
}

Это начнет работать в Safari, и при перетаскивании он будет установлен по умолчанию, пустое значение с dataTransfer объект. Тем не менее, Firefox не позволит вы перетащите элемент, если вы вручную установить некоторые данные, чтобы идти с ним. Чтобы решить это, нам нужен драгстарт обработчик событий, и мы дадим ему немного данные, которые нужно перетаскивать с помощью: 

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