html 拖放不同的项目

Question

我有一个拖放 html5 功能，效果很好：

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

所以我将它设置在两个元素上让我们说这两个：

    <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>

它适用于第一个元素，但当我尝试拖放第二个元素时，它一直在拖放第一个元素。我还在多个项目上对其进行了测试：当我拖动任何项目时，只有第一个项目会掉落？

Answer 1

这可能是因为您有 2 个具有相同 ID 的元素：drag1。你应该避免给你的元素相同的 ID

html 拖放不同的项目

html drag and drop different items

html

drag