当我想拖放项目时出现 TypeError

Question

当我想将图像拖到另一个位置时出现错误。 TypeError：无法在 'DataTransfer' 上执行 'setData'：需要 2 个参数，但只有 1 个 present.at HTMLDivElement.dropLoc.ondrop 我不明白这个错误。我想将列表中的图像拖到另一个位置。这是我的代码

<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

使用此代码

<html>
<head>
</head>
<body>
     <ul>
        <li><img class="img" id="dragItem1" src="http://res.cloudinary.com/demo/image/upload/w_300,h_200,c_crop/sample.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>
        <li><img class="img" id="dragItem5" src="https://res.cloudinary.com/zestarla/image/upload/v1629324536/kajabi%20work/IMG_4950_jktzgh.jpg" /></li>
        <li><img class="img" id="dragItem6" src="https://res.cloudinary.com/zestarla/image/upload/v1629324539/kajabi%20work/IMG_4949_wbxi0l.jpg" /></li>
    </ul>

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

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

        dragItem.forEach(obj=>obj.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) {
          evt.preventDefault();
            var dropItem = evt.dataTransfer.getData('key');
            
            var myElement = document.getElementById(dropItem);
            var myNewElement = document.createElement('img');
            myNewElement.src = myElement.src;
            dropLoc.appendChild(myNewElement);

        }
    </script>
</body>
</html>

Answer 2

你的代码有什么问题：

您将相同的 id 设置为多个元素（无效 HTML）
因此，您仅在第一张图片上设置了 dragstart 事件侦听器

您的代码已修复（点击“运行代码片段”进行测试）：

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>

当我想拖放项目时出现 TypeError

TypeError when I want to drag and drop item

javascript

drag-and-drop

draggable