Использование Drag&Drop в HTML 5

[ierogliph]

Стоит отметить, что это перевод и использовать соответствующий хаб.
Как-то нечестно отправлять оригинальную статью в «Полезно почитать».

[BuranLcme]

Только закончил разбираться с DnD и решил почитать хабр, а тут сразу статья про DnD.

Пользуясь случаем спрошу. Как известно событие dragLeave всплывающее. Соответственно при верстке чуть сложнее чем два div-a начинает вызываться когда надо и когда не надо. Что интересно, только в Хроме. Совсем выключить его нельзя, т.к. хочется знать, когда перемещение вышло за границы монитора. Сейчас для этого сочинил вот такое условие:

!e.relatedTarget && !e.x && !e.y

но очень не нравится как это выглядит. Может кто-то из многоуважаемого хабрасообщества подскажет как решить эту проблему проще и красивее?

[NeX]

timeout = null;
$(document).on({
	'dragover dragenter': function(e){
		clearTimeout(timeout);
	},
	'dragleave': function(e) {
		clearTimeout(timeout);
		timeout = setTimeout(callback, 50);
	}
});

[tvolf]

Проверил пример в Firefox 23 — не работает. Хмм… ) Посмотрел в консоль Firebug'а — в js-файлике 2 опечатки:
==

function dragEnter(ev) {
   event.preventDefault();
   return true;
}
function dragOver(ev) {
     event.preventDefault();
}

==
В обоих случаях исправил в теле функций «event» на «ev», и все заработало )

[SeVit]

на quirksmode есть хорошая статья по теме: The HTML5 drag and drop disaster

[TNK]

Недавно писал для своих нужд такую штуку (github), так зарёкся иметь дело с HTML5 DnD API, со статьёй «The HTML5 drag and drop disaster» согласен на все 100!

[Claud]

Немного не в тему, но может кто знает. Как получить путь до картинки, которая перетащена с компа? Свойства которые хранят эту инфу судя по всему с префиксами и на хром оно пустое. Есть какой-то универсальный способ?

[EagleMoor]

Это называется html 5 drag and drop file upload на сколько мне память не изменяет. Картинка там передается не как путь до файла на вашем компьютере, а как содержимое самого файла. Находятся в e.dataTransfer.

Вот пример: html5demos.com/drag-anything

[evgabd]

Увы, но DnD в HTML5 не прокручивает страницу, если подвести курсор с объектом к её границе.

[LegoMushroom]

ай ай ай www.webdesignerdepot.com/2013/08/how-to-use-html5s-drag-and-drop/

[evgabd]

grokru, вы забыли поставить тег «перевод»?