未捕获的TypeError：无法执行＆＃39; appendChild＆＃39;

Question

我试图创建一个拖放系统，当我尝试将卡片移动到另一个div时出现问题。

jQuery('<div/>', {
                id: 'foo',
                class: 'card alert',
                href: 'http://google.com',
                title: 'Become a Googler',
                rel: 'external',
                text: 'Go to Google!',
                draggable: 'true'
            }).appendTo('#space_1');
          }

我的脚本拖放

var dropTarget = document.querySelector(".wrapper");
var draggables = document.querySelectorAll(".task");

for(let i = 0; i < draggables.length; i++) {
  draggables[i].addEventListener("dragstart", function (ev) {
     ev.dataTransfer.setData("srcId", ev.target.id);
  });
}

dropTarget.addEventListener('dragover', function(ev) {
  ev.preventDefault();
});

dropTarget.addEventListener('drop', function(ev) {
  ev.preventDefault();
  let target = ev.target;
  let droppable  = target.classList.contains('box');
  let srcId = ev.dataTransfer.getData("srcId");

  if (droppable) {
    ev.target.appendChild(document.getElementById(srcId));
  }
});

HTML

<div class="wrapper">
            <div class="box col-sm-3" id="space_1"></div>
            <div class="box col-sm-3" id="space_2"></div>
            <div class="box col-sm-3" id="space_3"></div>
            <div class="box col-sm-3" id="space_4"></div>
    </div>

运作良好，但当我尝试移动卡时，我收到以下消息

Answer 1

如果要拖动卡片，可以将“任务”添加为课程。即。

jQuery('<div/>', {
    id: 'foo',
    class: 'card alert task',
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external',
    text: 'Go to Google!',
    draggable: 'true'
}).appendTo('#space_1');