JS实现图片拖拽功能时触发DataTransfer.setData参数不足TypeError如何解决

错误原因 #

• ondrop事件内调用了错误的API：读取拖拽存储的数据需要使用getData方法，你错误写成了setData。setData用于存储数据，要求必须传入「键名」和「值」两个参数，仅传入1个参数就会触发你遇到的参数缺失报错。
• 所有图片使用了重复的id属性：HTML规范要求id全局唯一，document.getElementById只会匹配到页面中第一个符合条件的元素，最终只有第一张图片绑定了拖拽启动事件，其余图片无法拖拽。
• 缺少可拖拽标识：img标签默认不可拖拽，需要给每个图片添加draggable="true"属性才能正常触发拖拽流程。

修复后完整代码 #

<ul>
  <li><img class="dragItem" draggable="true" src="http://res.cloudinary.com/demo/image/upload/w_300,h_200,c_crop/sample.jpg" /></li>
  <li><img class="dragItem" draggable="true"
          src="https://res.cloudinary.com/zestarla/image/upload/v1629324525/kajabi%20work/IMG_4954_wgmrmv.jpg" />
  </li>
  <li><img class="dragItem" draggable="true" 
          src="https://res.cloudinary.com/zestarla/image/upload/v1629324530/kajabi%20work/IMG_4952_auz4in.jpg" />
  </li>
  <li><img class="dragItem" draggable="true"
          src="https://res.cloudinary.com/zestarla/image/upload/v1629324531/kajabi%20work/IMG_4962_hra9xx.jpg" />
  </li>
  <li><img class="dragItem" draggable="true" 
          src="https://res.cloudinary.com/zestarla/image/upload/v1629324533/kajabi%20work/IMG_4948_xoxjgd.jpg" />
  </li>
  <li><img class="dragItem" draggable="true"
          src="https://res.cloudinary.com/zestarla/image/upload/v1629324536/kajabi%20work/IMG_4950_jktzgh.jpg" />
  </li>
  <li><img class="dragItem" draggable="true" 
          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 dragItems = document.querySelectorAll(".dragItem")
  var dropLoc = document.getElementById("dropLocation")

  // 给所有可拖拽图片绑定拖拽启动事件
  dragItems.forEach(dragItem => {
    dragItem.ondragstart = function (evt) {
      // 直接存储图片地址，后续无需再查询DOM
      evt.dataTransfer.setData('imgSrc', evt.target.src);
    }
  })

  dropLoc.ondragover = function (evt) {
    evt.preventDefault();
  }

  dropLoc.ondrop = function (evt) {
    evt.preventDefault();
    // 读取拖拽存储的图片地址
    var imgSrc = evt.dataTransfer.getData('imgSrc');
    var myNewElement = document.createElement('img');
    myNewElement.src = imgSrc;
    dropLoc.appendChild(myNewElement);
  }
</script>

内容的提问来源于stack exchange，提问作者user9900365