HTML5 drag and drop, как правильно?

Question

[Кристина]

Вот тренирую перетаскивание, вопрос, как сделать свою миниатюру при перетаскивании встроенным в API функционалом? Или только мышинными событиями такое провернуть можно?
Ну и вообще, правильно ли я использую drag and drop?

Answer 1

[Владимир Проскурин]

в e.dataTransfer.setImage можно задать свою картинку
Тут подробнее https://developer.mozilla.org/en-US/docs/Web/API/D...
Тут пример https://codepen.io/webgeeker/pen/KBzrxE

UPD: т.е. в dragStart пишите

function dragStart(e){
  var img = new Image();
  img.src = "/path/image.jpg";
  e.dataTransfer.setDragImage(img, 0, 0);
}

Предварительно нужно сделать так, чтобы картинка была уже закешированной в браузере (чтобы при драге браузер ее не качал), поэтому лучше img заранее грузить.

Comments

[Кристина]

Ааа, вот для чего этот dataTransfer))) Спасибо!

[Владимир Проскурин]

Кристина, не только, он служит для хранения определенных данных при перетаскивании, там есть еще важные свойства типа dropEffect - эффект перетаскивания, files - файлы перетаскивания (например с рабочего стола, без всякого input file), а также setData/getData для установки и чтения передаваемых данных.

[Кристина]

Владимир Проскурин, Поняла, сейчас почитаю внимательно. А чтобы отображался полностью элемент, который переносим, это уже просто к js?

[Владимир Проскурин]

Кристина, если в setDragImage вместо картинки передать html элемент, то будет делаться скрин этого элемента, и тащиться. Если это не устроит, то только на Js https://learn.javascript.ru/drag-and-drop

[Кристина]

Владимир Проскурин, Классно, всё работает! Спасибо!)

Последний вопрос, я в ie ещё не тестировала, а там setDragImage работает?)

[Владимир Проскурин]

Кристина, нет, не поддерживается. Также не поддерживается на мобильных устройствах.
Это косметический функционал, поэтому не думаю, что будет страшно, если в IE что-то другое будет отображаться.

[Кристина]

Владимир Проскурин, Поняла, спасибо!