Canban

HTML

function addCard(columnId) {
  const column = document.getElementById(columnId);
  const titleInput = column.querySelector(".add-card input");
  const descriptionInput = column.querySelector(".add-card textarea");
  const title = titleInput.value.trim();
  const description = descriptionInput.value.trim();

  if (title !== "" && description !== "") {
    const card = document.createElement("div");
    card.className = "card";
    card.draggable = true;

    const cardTitle = document.createElement("h3");
    cardTitle.textContent = title;

    const cardDescription = document.createElement("p");
    cardDescription.textContent = description;

    const deleteBtn = document.createElement("button");
    deleteBtn.className = "delete-btn";
    deleteBtn.innerHTML = "×";
    deleteBtn.onclick = () => card.remove();

    card.appendChild(cardTitle);
    card.appendChild(cardDescription);
    card.appendChild(deleteBtn);

    card.addEventListener("dragstart", dragStart);
    card.addEventListener("dragend", dragEnd);

    column.querySelector(".cards").appendChild(card);
    titleInput.value = "";
    descriptionInput.value = "";
  } else {
    alert("Please enter both a title and a description for the card.");
  }
}

function dragStart(e) {
  e.dataTransfer.setData("text/plain", e.target.id);
  e.target.classList.add("dragging");
}

function dragEnd(e) {
  e.target.classList.remove("dragging");
}

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

function drop(e) {
  e.preventDefault();
  const draggedCard = document.querySelector(".dragging");
  const targetColumn = e.target.closest(".column");
  if (targetColumn) {
    targetColumn.querySelector(".cards").appendChild(draggedCard);
  }
}

document.querySelectorAll(".column").forEach((column) => {
  column.addEventListener("dragover", allowDrop);
  column.addEventListener("drop", drop);
});

HTML CanbanCSS CanbanTS Canban