저는 현재 trello와 같은 앱에서 작업 중이며 드래그 앤 드롭 이벤트 및 DOM과 관련된 몇 가지 문제가 있습니다. 기본적으로 각각 ID가 " card-container"인 div를 포함하는 4 개의 목록이 있습니다 . 예상대로 소스 코드에서 만든 카드를 이동할 수 있지만 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%;
}