拖放由DOM

Question

我目前正在开发类似trello的应用程序，并且遇到了拖放事件和DOM的一些问题。我基本上有四个列表，每个列表包含一个ID为“ card-container”的div。我可以按预期的方式移动在源代码中创建的卡，但是，当我通过DOM添加卡并尝试将其移动到另一个容器时，该容器会附加一个子"null"。不知道我在做什么错。

添加新卡时，功能makeCard()通过提交按钮来运行。

draganddorp.js

const card = document.querySelector('.task-card');
const cards = document.querySelectorAll('.task-card')
const cardContainers = document.querySelectorAll('.card-container');

var draggingCard = null;

// card listeners
cards.forEach(addCardListeners);

// Loop through taskContainer boxes and add listeners
cardContainers.forEach(addContainerListeners);

// Drag Functions
function dragStart(event) {
    this.className += ' card-hold';
    setTimeout(() => (this.className = 'invisible'), 0); //set timeout so card wont dissapear
    draggingCard = event.target;
}

function dragEnd() {
    this.className = 'task-card';
    draggingCard = null;
}

function dragOver(e) {
    e.preventDefault();
}

function dragEnter(e) {
    e.preventDefault();
    this.className += ' card-container-hover';
}

function dragLeave() {
    this.className = 'card-container';
}

function dragDrop() {
    this.className = 'card-container';
    this.append(draggingCard);
}

function addCardListeners(card) {
    card.addEventListener('dragstart', dragStart);
    card.addEventListener('dragend', dragEnd);
}

function addContainerListeners(cardContainer) {
    cardContainer.addEventListener('dragover', dragOver);
    cardContainer.addEventListener('dragenter', dragEnter);
    cardContainer.addEventListener('dragleave', dragLeave);
    cardContainer.addEventListener('drop', dragDrop);
}

makecard.js

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);
}

html

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

css

.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%;
}

Answer 1

在我看来，当您在makeCard(destination)函数中制作新卡时，没有在其上添加dragstart snd dragend侦听器。这样draggingCard仍然为null，因为尚未设置（在dragStart事件侦听器中发生）。

尝试将其添加到makeCard函数的末尾。

addCardListeners(createTaskCard);

当然，如果没有有效的示例，很难提供帮助。