我使用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。
有人有解决方案吗?
由于
答案 0 :(得分:0)
试试这个:
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;并将事件附加到每个事件。