Как корректно вызвать событие Drag?

Question

[Даниил]

Контекст: реализация перетаскивания элементов посредством HTML 5 Drag'n'Drop API

Задачей стоит убрать фантомную копию перетаскиваемого элемента, которая следует за мышью при перетаскивании элемента с атрибутом draggable="true". Вместо неё нужно чтобы сам элемент двигался за мышью.

В качестве решения было придумано вызвать метод event.preventDefault в обработке события 'dragstart'. Но таким образом событие 'drag'для этого элемента не вызывается.
Пробовал через dispatchEvent, но не очень получилось.

Соответственно, вопрос: как искусственно вызвать событие 'drag' в обработке события 'dragstart'или же решить поставленную задачу иным способом?

Спасибо.

Comments

[imko]

transform`ом за мышкай можешь двигать, если нужно чтобы осталось место от него пустое, либо position: fixed чтобы он "вырвался"
Толку отменять событие и вызывать его же честно говоря не могу найти

[Даниил]

imko,

Задачей стоит убрать фантомную копию перетаскиваемого элемента, которая следует за мышью при перетаскивании элемента с атрибутом draggable="true". Вместо неё нужно чтобы сам элемент двигался за мышью.

[szQocks]

Даниил, ты уже более двух лет изучаешь js, и тривиальные задачи решить не можешь ? что даже работу с домом не изучил на базовом уровне ?

Соответственно, вопрос: как искусственно вызвать событие 'drag' в обработке события 'dragstart'

'dragstart' - mousedown, 'drag' - mousemove

[imko]

Даниил, ну так и двигай его трансформом) пиши свой превент в драгстарте и вешай код для движения за мышкой

Answer 1

[Stalker_RED]

elem.addEventListener('dragstart', function(evt) {
  // прозрачная картинка вместо "призрака"
  const img = new Image();
  img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
  evt.dataTransfer.setDragImage(img, 0, 0);  
});

Ну и по событию drag можете двигать за курсором сам объект.