在多个元素上自定义拖动图像

Customize drag image on several element

本文关键字：自定义 拖动 图像 元素      更新时间：2023-09-26

使用jquery拖动类似的元素;

<div id="drag-with-image" class="dragme">
    blabla 
</div>
<script>
    $(this).draggable({
        revert: false,   
        revertDuration: 0  
    });
</script>

效果很好。

我要做的是自定义图像当我拖动一个元素。我已经这样做了:

<script>
document.getElementById("drag-with-image").addEventListener("dragstart",                   
function(e) {
    var img = document.createElement("img");
    img.src = "http://kryogenix.org/images/hackergotchi-simpler.png";
    e.dataTransfer.setDragImage(img, 0, 0);
}, false);
</script>

效果很好。

我的问题是:这段代码适用于id为"drag-with-image"的元素。我需要使用这段代码与许多拖动的元素，我不能用类代替id。

有人有办法吗?

谢谢

试试这个:

var draggables = document.querySelectorAll(".drag-with-image");
var index = 0, length = draggables.length;
for ( ; index < length; index++) {
    draggables[index].addEventListener("dragstart",                   
        function(e) {
            var img = document.createElement("img");
            img.src = "http://kryogenix.org/images/hackergotchi-simpler.png";
            e.dataTransfer.setDragImage(img, 0, 0);
        }, false
    );
}

这将查找所有带有'drag-with-image'类的元素，并将事件附加到每个元素上。

相关文章：