使用類選擇器進行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將應用於所有這些項目