Javascript 拖放返回'；空'；关于DOM创建的项目

我目前正在开发一个类似trello的应用程序，在拖放事件和DOM方面遇到了一些问题。我基本上有四个列表，每个列表包含一个id为“

cardcontainer

”的div。我能够按预期移动在源代码中创建的卡，但是，当我通过DOM添加卡并尝试将其移动到另一个容器时，该容器会附加一个子

“null”

。不知道我做错了什么

添加新卡时，通过提交按钮运行函数

makeCard（）

Dragandorp.js makecard.js html

---

在我看来，当您在

makeCard（destination）

函数中制作一张新卡时，您并没有向其中添加dragstart snd和dragend侦听器。因此，

draggingCard

仍然为空，因为它尚未设置（在dragStart事件侦听器中发生）

尝试将其添加到

makeCard

函数的末尾

addCardListeners(createTaskCard);

---

当然，没有一个有效的例子是有点难以帮助的。

有时我们只需要一双额外的眼睛：）

function makeCard(destination) {
    //defining all variables needed for creating a card
    let getCardContainer = document.getElementById(destination);
    let createTaskCard = document.createElement("div");

    //varibles needed for task header
    let createTaskHeader = document.createElement("div");
    let createTags = document.createElement("div");
    let createTag = document.createElement("span");
    let createActionsBtn = document.createElement("div");

    //varibles needed for task body
    let createTaskBody = document.createElement("div");
    let createTaskTitle = document.createElement("p");

    //varibles needed for task footer
    let createTaskFooter = document.createElement("div");
    let createAsignee = document.createElement("div");
    let createAsigneeIcon = document.createElement("span");
    let createAsigneeMember = document.createElement("span");
    let createDueDate = document.createElement("div");
    let createDueDateDate = document.createElement("span");
    let createDueDateIcon = document.createElement("span");

    //creating card
    createTaskCard.className = "task-card";
    createTaskCard.setAttribute("draggable", true);

    //addding class/id and HTML to task header
    createTaskHeader.className = "task-card-header";
    createTags.className = "tags";
    createTag.className = "tag";
    createTag.id = "tag-";
    createTag.innerHTML = "someTags"
    createActionsBtn.className = "actions";
    //add action itself (svg)

    //addding class/id and HTML to task body
    createTaskBody.className = "task-card-body";
    createTaskTitle.innerHTML = "someTitle"

    //addding class/id and HTML to task footer
    createTaskFooter.className = "task-card-footer";
    createAsignee.className = "asignee";
    createAsigneeIcon.className = "icon";
    createAsigneeIcon.innerHTML = "I";
    createAsigneeMember.innerHTML = "Assignee name";
    createDueDate.className = "dueDate";
    createDueDateDate.innerHTML = "someDate"
    createDueDateIcon.className = "icon";
    createDueDateIcon.innerHTML = "I";

    //setting up structure
    createTaskHeader.appendChild(createTags);
    createTaskCard.appendChild(createTaskHeader);
    createTags.appendChild(createTag);
    createTaskHeader.appendChild(createActionsBtn);
    createTaskCard.appendChild(createTaskBody);
    createTaskBody.appendChild(createTaskTitle);
    createTaskCard.appendChild(createTaskFooter);
    createTaskFooter.appendChild(createAsignee);
    createAsignee.appendChild(createAsigneeIcon);
    createTaskFooter.appendChild(createDueDate);
    createAsignee.appendChild(createAsigneeMember)
    createDueDate.appendChild(createDueDateDate);
    createDueDate.appendChild(createDueDateIcon);

    //appending card to card container
    getCardContainer.appendChild(createTaskCard);
}

<div class="task-card" draggable="true">
    <div class="task-card-header">
        <div class="tags">
            <span class="tag">Priority</span>
            <span class="tag">Design</span>
        </div>
        <div class="actions">
            <a href="#">
               <!--icon-->
            </a>
        </div>
    </div>
    <div class="task-card-body">
        <p>Test</p>
    </div>
    <div class="task-card-footer">
        <div class="asignee">
            <span class="icon">
                <!--icon-->
            </span>
            <span>Daniel Kjellid</span>
        </div>
        <div class="dueDate">
            <span>23.05</span>
            <span class="icon">
                <!--icon-->
            </span>
        </div>
    </div>
</div>

.card-container {
  background: white;
  height: auto;
  margin: 2px;
  min-height: 150px;
  width: 115%;
}

.card-container-hover { 
  border: dashed 3px #F364A2 !important;
}

.card-dragging {
  display: absolute;
}

.card-hold {
  border: solid 5px #ccc;
}
.task-card {
  border-radius: 8px;
  box-shadow: 0 0 4px 0 rgba(0,0,0,0.50);
  color: #3E4C59;
  height: auto;
  margin-bottom: 13px;
  width: 100%;
}

addCardListeners(createTaskCard);