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

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

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

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

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

draggable="true"

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

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

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

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