jQuery Drag and Drop using class selectors

Question

This must be a simple one for expert. I am new to JS/jQuery. I have got a script to drag and copy and I modified it according to my requirements. It is implemented with "id" selectors. I want to implement the same using "class" selectors.

Here is the fiddle demo

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

});

Explanation: I have a requirement where I need to implement this for a set of images which are dynamically added(with JS). So I cannot use Id of the target images. I need to use class. I tried but couldn't get it working. Can anyone help me with this?

Thanks in advance,

Answer 1

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

It's pretty much a matter of changing your selctor:

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

There's also a minor problem -- if you have dragged an image to the leftbox , and then drag the image in leftbox to leftbox ... you'll get an error. (You might just need to removeClass after copying the image to leftbox ).

Alterantively, if you're saying that your elements won't have ID's... then you'll need to pass around the actual source of the image, rather than the element ID. Here's an updated fiddle which does that .

And here's one where you always append to the box, rather than to the target (which may be the img which has just been cleared)!

Answer 2

Class selector (".class") selects all elements with the given class. An element can have multiple classes; only one of them must match.

So simply replace ids with clas selectors, like this:

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

Answer 3

Use something like '.js-drag-item' and '.js-drop-target' to replace your div id's. I like to add 'js-' so I remember it is a class name that has Javascript associated with it rather than CSS.

eg

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

You can have as many drag items or drop items as you want and the JS will be applied to all of them