TypeError when I want to drag and drop item

Question

I got an error when I want to drag an image to another location. TypeError: Failed to execute 'setData' on 'DataTransfer': 2 arguments required, but only 1 present.at HTMLDivElement.dropLoc.ondrop I don't understand this error. I want to drag and of the images in the list to another location. Here is my code

<ul>
        <li><img id="dragItem" src="http://res.cloudinary.com/demo/image/upload/w_300,h_200,c_crop/sample.jpg" /></li>
        <li><img id="dragItem"
                src="https://res.cloudinary.com/zestarla/image/upload/v1629324525/kajabi%20work/IMG_4954_wgmrmv.jpg" />
        </li>
        <li><img id="dragItem" 
                src="https://res.cloudinary.com/zestarla/image/upload/v1629324530/kajabi%20work/IMG_4952_auz4in.jpg" />
        </li>
        <li><img id="dragItem"
                src="https://res.cloudinary.com/zestarla/image/upload/v1629324531/kajabi%20work/IMG_4962_hra9xx.jpg" />
        </li>
        <li><img id="dragItem" 
                src="https://res.cloudinary.com/zestarla/image/upload/v1629324533/kajabi%20work/IMG_4948_xoxjgd.jpg" />
        </li>
        <li><img id="dragItem"
                src="https://res.cloudinary.com/zestarla/image/upload/v1629324536/kajabi%20work/IMG_4950_jktzgh.jpg" />
        </li>
        <li><img id="dragItem" 
                src="https://res.cloudinary.com/zestarla/image/upload/v1629324539/kajabi%20work/IMG_4949_wbxi0l.jpg" />
        </li>
    </ul>

    <div id="dropLocation">Drop here</div>

    <script>
        var dragItem = document.getElementById("dragItem")
        var dropLoc = document.getElementById("dropLocation")

        dragItem.ondragstart = function (evt) {
            evt.dataTransfer.setData('key', evt.target.id);
            //console.log("it dragging...")
        }

        dropLoc.ondragover = function (evt) {
            evt.preventDefault();
            //console.log("it dragover")
        }

        dropLoc.ondrop = function (evt) {
            var dropItem = evt.dataTransfer.setData('key');
            evt.preventDefault();
            var myElement = document.getElementById(dropItem);
            var myNewElement = document.createElement('img');
            myNewElement.src = myElement.src;
            dropLoc.appendChild(myNewElement);

        }
    </script>

Answer 1

What is wrong in your code:

• You set the same id to multiple elements (which is not valid HTML)
• As a consequence you set the dragstart event listener on the first image only

Your code fixed below (click "Run code snippet" to test):

var dragItems = Array.from(document.getElementsByClassName("dragItem"));
var dropLoc = document.getElementById("dropLocation");

dragItems.forEach((dragItem) => {
  dragItem.ondragstart = function (evt) {
    evt.dataTransfer.setData("key", evt.target.id);
    //console.log("it dragging...")
  };
});

dropLoc.ondragover = function (evt) {
  evt.preventDefault();
  //console.log("it dragover")
};

dropLoc.ondrop = function (evt) {
  var dropItem = evt.dataTransfer.getData("key");
  evt.preventDefault();
  var myElement = document.getElementById(dropItem);
  var myNewElement = document.createElement("img");
  myNewElement.src = myElement.src;
  dropLoc.appendChild(myNewElement);
};

<ul>
    <li>
        <img id="img1" class="dragItem" src="http://res.cloudinary.com/demo/image/upload/w_300,h_200,c_crop/sample.jpg"/>
    </li>
    <li>
        <img id="img2" class="dragItem" src="https://res.cloudinary.com/zestarla/image/upload/v1629324525/kajabi%20work/IMG_4954_wgmrmv.jpg"/>
    </li>
    <li>
        <img id="img3" class="dragItem" src="https://res.cloudinary.com/zestarla/image/upload/v1629324530/kajabi%20work/IMG_4952_auz4in.jpg"/>
    </li>
    <li>
        <img id="img4" class="dragItem" src="https://res.cloudinary.com/zestarla/image/upload/v1629324531/kajabi%20work/IMG_4962_hra9xx.jpg"/>
    </li>
    <li>
        <img id="img5" class="dragItem" src="https://res.cloudinary.com/zestarla/image/upload/v1629324533/kajabi%20work/IMG_4948_xoxjgd.jpg"/>
    </li>
    <li>
        <img id="img6" class="dragItem" src="https://res.cloudinary.com/zestarla/image/upload/v1629324536/kajabi%20work/IMG_4950_jktzgh.jpg"/>
    </li>
    <li>
        <img id="img7" class="dragItem" src="https://res.cloudinary.com/zestarla/image/upload/v1629324539/kajabi%20work/IMG_4949_wbxi0l.jpg"/>
    </li>
</ul>
<div id="dropLocation">Drop here</div>