使用类选择器进行jQuery拖放

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

这是您使用类所做的基本JSFiddle。

这几乎是更换选择器的问题：

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

还有一个小问题-如果您将图像拖动到leftbox ，然后将leftbox的图像拖动到leftbox ，则会出现错误。 （您可能只需要removeClass复制图像后leftbox ）。

或者，如果您说元素没有ID ...，则需要传递图像的实际来源，而不是元素ID。 这是一个更新的小提琴 。

在这里 ，您总是将其附加到框上，而不是附加到目标上（可能是刚刚清除的img）！

Answer 2

类选择器（“ .class”）选择具有给定类的所有元素。 一个元素可以有多个类。 他们中只有一个必须匹配。

因此，只需用clas选择器替换id，如下所示：

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

Answer 3

使用“ .js-drag-item”和“ .js-drop-target”之类的值替换div ID。 我喜欢添加“ js-”，因此我记得它是一个与Java而不是CSS关联的类名。

例如

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将应用于所有这些项目