Javascrip drag and drop TypeError

JavaScript
1

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

Updated the script to this. and I used different id for all image. Id in an html document is unique it is only the class that can be the same.

div class="gallery scroller">
        <ul>
            <li><img class="img" id="dragItem1"
                    src="https://res.cloudinary.com/zestarla/image/upload/v1629324525/kajabi%20work/IMG_4954_wgmrmv.jpg" />
            </li>
            <li><img class="img" id="dragItem2"
                    src="https://res.cloudinary.com/zestarla/image/upload/v1629324530/kajabi%20work/IMG_4952_auz4in.jpg" />
            </li>
            <li><img class="img" id="dragItem3"
                    src="https://res.cloudinary.com/zestarla/image/upload/v1629324531/kajabi%20work/IMG_4962_hra9xx.jpg" />
            </li>
            <li><img class="img" id="dragItem4"
                    src="https://res.cloudinary.com/zestarla/image/upload/v1629324533/kajabi%20work/IMG_4948_xoxjgd.jpg" />
            </li>
  </ul>
    </div>

    <div class="dropped" id="dropLocation" draggable="true">Drop here</div>
   <script>
        var dragItems = Array.from(document.getElementsByClassName("img"));
        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);
        };
    </script>
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.