Question

这对于专家来说必须是一个简单的。我是JS / jQuery的新手。我有一个拖动和复制的脚本，我根据我的要求修改了它。它使用“id”选择器实现。我想用“类”选择器实现相同的功能。

$(document).ready(function(){
$('#arsenal').on("dragstart", ( function (e) {
    e.originalEvent.dataTransfer.setData("Text", e.target.id);
}));

$('#leftbox').on("dragenter", ( function (e) {
    e.preventDefault();
}));

$('#leftbox').on("dragover", ( function (e) {
    e.preventDefault();
}));

$('#leftbox').on("drop", ( function (e) {
    e.preventDefault();
    $(this).empty();
    var data=e.originalEvent.dataTransfer.getData("Text");
    var nodeCopy = document.getElementById(data).cloneNode(true);
    nodeCopy.id = "newId";
    e.target.appendChild(nodeCopy);
}));

});

说明：我有一个要求，我需要为一组动态添加的图像（使用JS）实现它。所以我不能使用目标图像的Id。我需要上课。我尝试但无法使其正常工作。任何人都可以帮我这个吗？

提前致谢，

Answer 1

Here's a basic JSFiddle of what you're doing using classes.

这几乎是改变你的选择的问题：

$('.draggableImg').on("dragstart", ( function (e) {
    ...
});

还有一个小问题 - 如果您将图片拖到leftbox，然后将leftbox中的图片拖到leftbox ...您将收到错误。（将图像复制到removeClass后，您可能只需要leftbox。

另外，如果你说你的元素没有ID ...... 那么你需要传递图像的实际来源，而不是元素ID。这是一个updated fiddle which does that。

和here's一个你总是附加到方框而不是目标（可能是刚被清除的img）的地方！

Answer 2

类选择器（＆＃34; .class＆＃34;）选择具有给定类的所有元素。一个元素可以有多个类;只有其中一个必须匹配。

所以只需用clas选择器替换id，就像这样：

$('.class').on("dragstart", ( function (e) {
    e.originalEvent.dataTransfer.setData("Text", e.target.id);
}));

Answer 3

使用类似＆＃39; .js-drag-item＆＃39;和＆＃39; .js-drop-target＆＃39;替换你的div id。我想添加＆＃39; js - ＆＃39;所以我记得它是一个类名，它与Javascript相关联而不是CSS。

e.g。

JS

$('.js-drag-item').on("dragstart", ( function (e) {
   e.originalEvent.dataTransfer.setData("Text", e.target.id);
}));

HTML

<section class="js-drag-item">
    ....
</section>
<section class="js-drag-item">
    ....
</section>
etc

您可以根据需要添加任意数量的拖动项目或删除项目，JS将应用于所有这些项目

使用类选择器进行jQuery拖放

3 个答案: