Question

我使用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。

有人有解决方案吗？

由于

Answer 1

试试这个：

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
    );
}

这将找到课程中的所有元素＆＃39;拖动图像＆＃39;并将事件附加到每个事件。

自定义几个元素上的拖动图像

1 个答案: