С помощью перетаскивания HTML5, как я могу изменить изображение перетаскивания, когда оно находится над зоной перетаскивания?

Question

Итак, вот что я хочу сделать.Я хотел бы иметь возможность перетаскивать элемент и динамически изменять его перетаскивание по умолчанию на другое изображение, когда оно находится над зоной перетаскивания.

Answer 1

Вы можете установить изображение для перетаскивания, используя метод dataTransfer.setDragImage.Он существует в объектах событий всех событий перетаскивания, включая событие dragover.

Некоторым базовым кодом будет:

dropElem.ondragover = function(e) {
    if (e.stopPropagation) {
        e.stopPropagation(); //Stops some browsers from redirecting.
    }
    var dragIcon = document.createElement('img');
    dragIcon.src = 'image.png';
    dragIcon.width = 100;
    e.dataTransfer.setDragImage(dragIcon, 0, 0);
};