CODEWITHSUNDEEP
htmldrag
fa ze
fa ze

Reputation: 15

html drag and drop different items

I have a drag and drop html5 function which works fine : 

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

So I set it on two elements lets say those two:

    <div id="div1" id="drag1" draggable="true" ondragstart="drag(event)"> 
      <h3> Monday </h3> 
    </div>
    <div id="div1" id="drag1" draggable="true" ondragstart="drag(event)"> 
      <h3> Tuesday </h3> 
    </div>

It works fine with the first element, but when I try to drag and drop the second one, it keeps droping the first one. I have also tested it on multiple items: only the first item drops when I drag any item ?

Upvotes: 0

Views: 31

Answers (1)

L&#225;szl&#243; Stahorszki
L&#225;szl&#243; Stahorszki

Reputation: 1216

This is probably because you have 2 elements with the same ID: drag1. You should avoid giving your elements the same ID

Upvotes: 1

Related Questions