如何使用javascript将卡片拖动到其他列？

问题描述 投票：0回答：1

我使用 html、css 和 javascript 制作了这个（在 ai 的帮助下）

如您所见，它不会被拖到其他列，我该如何解决这个问题？我希望能够将卡片拖到进行中或完成，反之亦然。但它不会被拖到列中......我被卡住了

const addBox = document.querySelector(".addBox");
const popupBox = document.querySelector(".popup-box");
const closeIcon = popupBox.querySelector("header i");
const titleTag = popupBox.querySelector("input");
const descTag = popupBox.querySelector("textarea");
const addBtn = popupBox.querySelector("button");
const kanbanColumns = document.querySelectorAll(".kanban-column");
let selectedTag = "Personal"; // Default selected tag
let selectedTagColor = "#7875A9"; // Default tag color

const tagColors = {
  Personal: "#7875A9",
  Work: "#7DA9D6",
  School: "#FF8E8E",
  Coding: "#7BC683",
};

function loadTasksFromLocalStorage() {
  // Clear the Kanban board
  kanbanColumns.forEach((column) => {
    column.querySelector(".kanban-cards").innerHTML = "";
  });

  // Load tasks from local storage
  const storedTasks = JSON.parse(localStorage.getItem("tasks") || "[]");

  // Populate the Kanban board with stored tasks
  storedTasks.forEach((task) => {
    createKanbanCard(task.title, task.description, task.tag, task.tagColor);
  });

  // Update your 'notes' array with the loaded tasks
  notes.length = 0; // Clear the notes array
  notes.push(...storedTasks);
}

// Call the function to load tasks when the page loads
window.addEventListener("load", loadTasksFromLocalStorage);

const notes = JSON.parse(localStorage.getItem("tasks") || "[]");

addBox.addEventListener("click", () => {
  popupBox.classList.add("show");
});

closeIcon.addEventListener("click", () => {
  popupBox.classList.remove("show");
});

function createKanbanCard(title, description, tag, tagColor) {
  const card = document.createElement("div");
  card.classList.add("kanban-card");
  card.classList.add(`tag-${tag}`);
  card.draggable = true;
  card.dataset.tag = tag; // Store the tag information as a data attribute
  card.dataset.id = generateUniqueId();

  const cardTemplate = `
    <h4>${title}</h4>
    <p>${description}</p>
    <div class="kanban-card-tag" style="background-color: ${tagColor}">${tag}</div>
  `;

  card.innerHTML = cardTemplate;

  // Append the card to the appropriate column
  const targetColumn = Array.from(kanbanColumns).find(
    (column) => column.querySelector("h5").textContent.trim() === tag
  );

  if (targetColumn) {
    targetColumn.querySelector(".kanban-cards").appendChild(card);
  } else {
    // If the target column doesn't exist, default to the "To Do" column
    const todoColumn = kanbanColumns[0]; // First column is "To Do"
    todoColumn.querySelector(".kanban-cards").appendChild(card);
  }
}

addBtn.addEventListener("click", (e) => {
  e.preventDefault();
  let noteTitle = titleTag.value;
  let noteDesc = descTag.value;

  if (selectedTag && (noteTitle || noteDesc)) {
    // Create a new Kanban card dynamically
    createKanbanCard(noteTitle, noteDesc, selectedTag, selectedTagColor);

    // Add the task to your notes array
    const newTask = {
      id: generateUniqueId(),
      title: noteTitle,
      description: noteDesc,
      tag: selectedTag,
      tagColor: selectedTagColor,
    };
    notes.push(newTask);

    // Save tasks to local storage
    localStorage.setItem("tasks", JSON.stringify(notes));

    // Clear the input fields
    titleTag.value = "";
    descTag.value = "";

    // Close the popup
    closeIcon.click();
  } else {
    alert("Please select a tag and fill in the title or description.");
  }
});

// Add a dragstart event listener to all Kanban cards
const kanbanCards = document.querySelectorAll(".kanban-card");
kanbanCards.forEach((card) => {
  card.addEventListener("dragstart", (e) => {
    draggedCard = card; // Set the draggedCard variable
  });
});

// Add a dragover event listener to all Kanban columns
kanbanColumns.forEach((column) => {
  column.addEventListener("dragover", (e) => {
    e.preventDefault();
    column.classList.add("hover");
  });

  column.addEventListener("dragleave", (e) => {
    e.preventDefault();
    column.classList.remove("hover");
  });
});

// Add a drop event listener to all Kanban columns
kanbanColumns.forEach((column) => {
  column.addEventListener("drop", (e) => {
    e.preventDefault();
    if (draggedCard) {
      // Move the card to the new column
      column.querySelector(".kanban-cards").appendChild(draggedCard);

      // Update the card's status
      const newStatus = column.querySelector("h5").textContent.trim();
      const cardId = draggedCard.getAttribute("data-id");
      const updatedTask = notes.find((task) => task.id === cardId);
      if (updatedTask) {
        updatedTask.tag = newStatus;
        // Update the task's status in your data storage
        localStorage.setItem("tasks", JSON.stringify(notes));
      }

      // Reset the draggedCard variable
      draggedCard = null;
    }
  });
});

// Generate a unique ID for each card
function generateUniqueId() {
  return Date.now().toString(36) + Math.random().toString(36).substring(2);
}

// Event listener for radio buttons to update the selected tag
const tagRadioButtons = document.querySelectorAll('input[name="radio"]');

tagRadioButtons.forEach((radio) => {
  radio.addEventListener("click", () => {
    selectedTag = radio.nextElementSibling.textContent.trim();
    selectedTagColor = tagColors[selectedTag];
  });
});
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  display: flex;
  background: #f8f0ff;
  font-size: 17px;
}

.sidebar {
  position: sticky;
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  height: 100vh;
  padding: 0 1.7rem;
  color: white;
  overflow: hidden;
  transition: all 0.5s linear;
  background: white;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

.sidebar:hover {
  width: 240px;
  transition: 0.5s;
}

.menu {
  height: 88%;
  position: relative;
  list-style: none;
  bottom: 1rem;
  padding-top: 5px;
  margin-bottom: 2rem;
  margin-top: 2rem;
}

.menu li {
  padding: 1rem;
  margin: 8px 0;
  border-radius: 8px;
  transition: all 0.5s ease-in-out;
}

.logo {
  height: 70px;
  align-items: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 3px;
  padding-top: 20px;
  padding-right: 1rem;
  padding-bottom: 20px;
  color: #69665C;
  overflow: hidden;
  display: flex;
}

.logoimg {
  width: 42px;
  height: 42px;
  margin-right: 15px;
}

.logo h2 {
  display: flex;
  align-items: center;
}

.dash:hover,
.dash {
  background-color: #FFF9DE;
}

.personal:hover,
#personal:active {
  background-color: #D2CEFF;
}

.work:hover,
.work:active {
  background-color: #D1E5F7;
}

.school:hover,
.school:active {
  background-color: #FFCECE;
}

.coding:hover,
.coding:active {
  background-color: #DAF2D6;
}

.logout:hover {
  background-color: gray;
}

.logout:hover span {
  color: white;
}

.menu a {
  color: #69665C;
  font-size: 1rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.menu a span {
  overflow: hidden;
}

.menu a i {
  font-size: 1.2rem;
}

.fas.fa-user {
  color: #FFB843;
}

.fas.fa-clipboard {
  color: #7875A9;
}

.fas.fa-folder-open {
  color: #7DA9D6;
}

.fas.fa-book {
  color: #FF8E8E;
}

.fas.fa-laptop-code {
  color: #7BC683;
}

.fa-solid.fa-arrow-right-from-bracket {
  color: red;
}

.logout {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
}


/* MAIN YUNG SA RIGHT */


/* MAIN YUNG SA RIGHT */


/* MAIN YUNG SA RIGHT */

.main {
  position: relative;
  width: 100%;
  padding: 1rem;
  color: #69665C;
}

.header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background: white;
  border-radius: 10px;
  padding: 10px 2rem;
}

.header-wrapper img {
  max-width: 50px;
  border-radius: 50%;
}


/* /////MAIN YUNG SA RIGHT */


/* MAIN YUNG SA RIGHT */


/* MAIN YUNG SA RIGHT */


/*yung notes*/


/* Add this CSS for the to-do cards */

.todo-card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.todo-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 280px;
}

.todo-card-footer {
  text-align: right;
  font-size: 1rem;
}

.todo-card-header h3 {
  margin: 0;
  max-width: 260px;
}

.delete-btn {
  cursor: pointer;
  color: red;
}

.fas.fa-trash {
  color: red;
}

.todo-text {
  width: 100%;
  border: none;
  resize: none;
  padding: 0;
  margin: 10px 0;
  font-size: 16px;
}


/* POP UP PAG INADD */

.popup-box {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
  color: #69665C;
}

.popup-box .popup {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1000;
  max-width: 700px;
  width: 100%;
  transform: translate(-50%, -50%);
  justify-content: center;
}

.popup-box,
.popup-box .popup {
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
}

.popup-box.show,
.popup-box.show .popup {
  opacity: 1;
  pointer-events: auto;
}

.popup .content {
  background: lavender;
  border-radius: 15px;
  width: calc(100% - 50px);
}

.popup .content header {
  padding: 15px 25px;
  border-bottom: 1px solid #69665C;
}

.content header p {
  font-size: 20px;
  font-weight: 500;
}

.content header i {
  color: #69665C;
  cursor: pointer;
  font-size: 23px;
}

.content header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.content form {
  margin: 15px 25px 20px;
}

.content form .row {
  margin-bottom: 20px;
}

form .row label {
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
}

.content form :where(input,
textarea,
select) {
  width: 100%;
  height: 50px;
  outline: none;
  font-size: 1rem;
  padding: 0px 15px;
  border-radius: 10px;
}

.content form textarea {
  height: 150px;
  resize: none;
  padding: 8px 15px;
}

.content form button {
  width: 100%;
  height: 50px;
  border: none;
  background: #5D5A8C;
  outline: none;
  font-size: 1rem;
  font-weight: 500;
  color: white;
  border-radius: 10px;
  cursor: pointer;
}

.popup {
  display: flex;
  justify-content: center;
}


/* ADD TASK */

.addBox {
  margin: 1rem 0;
  background: #7875A9;
  color: white;
  text-align: center;
  padding: .5rem;
  border-radius: 10px;
  justify-content: center;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.addBox:hover {
  background: #5D5A8C;
}

.addBox:active {
  transform: scale(1.01);
}

.add i {
  font-size: 2rem;
}

.add p {
  font-size: 0.8rem;
}


/* ADD TASK TAPOS */


/* tags */

.btn-radio {
  display: inline-block;
}

.btn-radio input[type="radio"] {
  display: none;
}

.btn-radio input[type="radio"]+label span {
  display: inline-block;
  height: 100%;
  margin-right: 5px;
  padding: 3px 7px;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 5px;
  background-color: #fff;
  font-size: 1rem;
}

.btn-radio input[type="radio"]:checked+label span {
  background-color: #ccc;
}

.btn-radio i {
  padding-right: 5px;
}


/* Kanban Board */

.kanban-board {
  display: flex;
  justify-content: space-between;
  margin: 1rem 0;
}

.kanban-column {
  flex: 1;
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  margin: 0 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.kanban-column h5 {
  margin-bottom: 10px;
  padding: 0 0 10px 0px;
  border-bottom: 1px solid #69665C;
  color: #69665C;
}

.kanban-cards {
  min-height: 500px;
  /* Adjust the minimum height as needed */
}


/* Kanban Card */

.kanban-card {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  margin: 10px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.kanban-card h4 {
  font-size: .9rem;
  margin: 0;
  padding-bottom: 10px;
  font-weight: bold;
}

.kanban-card p {
  font-size: .8rem;
  margin: 0;
}

.kanban-card-tag {
  display: inline-block;
  padding: 2px 5px;
  border-radius: 4px;
  color: white;
  font-size: .8rem;
  margin-top: 10px;
}


/* Define different styles for different card tags */

.kanban-card.tag-Personal {
  border-left: 3px solid #7875A9;
}

.kanban-card.tag-Work {
  border-left: 3px solid #7DA9D6;
}

.kanban-card.tag-School {
  border-left: 3px solid #FF8E8E;
}

.kanban-card.tag-Coding {
  border-left: 3px solid #7BC683;
}


/* Card Dragging Styles */

.kanban-card.is-dragging {
  opacity: 0.5;
}


/* Card Placeholder Styles */

.kanban-card-placeholder {
  background-color: #ddd;
  height: 150px;
  /* Adjust the height as needed */
  border: 1px dashed #333;
  border-radius: 8px;
  margin-bottom: 10px;
}
<!-- Font Awesome Cdn Link -->
<script src="https://kit.fontawesome.com/04558dcba4.js" crossorigin="anonymous"></script>

<!-- POP UP PAG DRINAG -->
<div class="popup-box">
  <div class="popup">
    <div class="content">
      <header>
        <p>New Task</p>
        <i class="fa-solid fa-circle-xmark"></i>
      </header>
      <form action="#">
        <div class="row title">
          <label for="title">Title</label>
          <input id="title" placeholder="Enter your to-do here">
        </div>
        <div class="row description">
          <label for="desc">Description</label>
          <textarea id="desc" placeholder="Provide additional details..."></textarea>
        </div>



        <div class="row dropdown">
          <label>Tags</label>

          <div class="btn-radio" id="radio">
            <input type="radio" id="radio01" name="radio" />
            <label for="radio01"><span><i class="fas fa-clipboard"></i>Personal</span></label>
          </div>
          <div class="btn-radio">
            <input type="radio" id="radio02" name="radio" />
            <label for="radio02"><span><i class="fas fa-folder-open"></i>Work</span></label>
          </div>
          <div class="btn-radio">
            <input type="radio" id="radio03" name="radio" />
            <label for="radio03"><span><i class="fas fa-book"></i>School</span></label>
          </div>
          <div class="btn-radio">
            <input type="radio" id="radio04" name="radio" />
            <label for="radio04"><span><i class="fas fa-laptop-code"></i>Coding</span></label>
          </div>

        </div>
        <button>Add Task</button>
      </form>

    </div>
  </div>

</div>
<!-- DONE DRAG -->




<div class="sidebar">
  <div class="logo">
    <h2><img src="doit.png" class="logoimg"><span>DoIt!</span></h2>
  </div>

  <ul class="menu">
    <li class="dash">
      <a href="#">
        <i class="fas fa-user"></i>
        <span>Home</span>
      </a>
    </li>

    <li class="personal" id="personal" draggable="true">
      <a href="#">
        <i class="fas fa-clipboard"></i>
        <span>Personal</span>
      </a>
    </li>

    <li class="work">
      <a href="#">
        <i class="fas fa-folder-open"></i>
        <span>Work</span>
      </a>
    </li>
    <li class="school">
      <a href="#">
        <i class="fas fa-book"></i>
        <span>School</span>
      </a>
    </li>
    <li class="coding">
      <a href="#">
        <i class="fas fa-laptop-code"></i>
        <span>Coding</span>
      </a>
    </li>
    <li class="logout">
      <a href="#">
        <i class="fa-solid fa-arrow-right-from-bracket"></i>
        <span>Log out</span>
      </a>
    </li>
  </ul>
</div>
<!-- main sa right -->
<div class="main">
  <div class="header-wrapper">
    <div class="header-title">
      <h2>Home</h2>
    </div>
    <img src="rimuru.jpg" alt="">
  </div>

  <!-- BUTTON PARA SA ADD -->
  <div class="addBox">
    <i class="fa-solid fa-plus"></i>
    <p>Add Task</p>
  </div>

  <div class="kanban-board">
    <!-- To Do Column -->
    <div class="kanban-column">
      <h5>To do</h5>

      <div class="kanban-cards" id="todo-cards"></div>

    </div>

    <!-- In Progress Column -->
    <div class="kanban-column in-progress">
      <h5>In progress</h5>
      <div class="kanban-cards" id="inprogress-cards"></div>
    </div>

    <!-- Completed Column -->
    <div class="kanban-column">
      <h5>Completed</h5>
      <div class="kanban-cards" id="completed-cards"></div>
    </div>
  </div>
</div>

我使用了chatgpt和bard但仍然没有发生

javascript html css frontend draggable
1个回答
0
投票

（删除了所有 localStorage 函数以使代码片段在 SO 沙箱中工作）

问题 1 是 

draggedCard
给出 
undefined
（你声明它的方式使其范围为本地）。我在代码顶部声明了 
let draggedCard
，以将其范围扩大到整个脚本。

问题2是您将dragstart事件添加到卡片的方式，位于此评论下方

// Add a dragstart event listener to all Kanban cards
。 Yout 卡会动态添加到 DOM，并且您在文档就绪时绑定事件侦听器（当还没有卡时）。我将绑定移至函数 
createKanbanCard
内，您实际上在其中创建卡片并将其添加到 DOM。

const addBox = document.querySelector(".addBox");
const popupBox = document.querySelector(".popup-box");
const closeIcon = popupBox.querySelector("header i");
const titleTag = popupBox.querySelector("input");
const descTag = popupBox.querySelector("textarea");
const addBtn = popupBox.querySelector("button");
const kanbanColumns = document.querySelectorAll(".kanban-column");
let selectedTag = "Personal"; // Default selected tag
let selectedTagColor = "#7875A9"; // Default tag color
let draggedCard

const tagColors = {
  Personal: "#7875A9",
  Work: "#7DA9D6",
  School: "#FF8E8E",
  Coding: "#7BC683",
};


// Call the function to load tasks when the page loads

const notes = [];

addBox.addEventListener("click", () => {
  popupBox.classList.add("show");
});

closeIcon.addEventListener("click", () => {
  popupBox.classList.remove("show");
});

function createKanbanCard(title, description, tag, tagColor) {
  const card = document.createElement("div");
  card.classList.add("kanban-card");
  card.classList.add(`tag-${tag}`);
  card.draggable = true;
  card.dataset.tag = tag; // Store the tag information as a data attribute
  card.dataset.id = generateUniqueId();
  card.addEventListener("dragstart", (e) => {
    draggedCard = card; // Set the draggedCard variable
  });

  const cardTemplate = `
    <h4>${title}</h4>
    <p>${description}</p>
    <div class="kanban-card-tag" style="background-color: ${tagColor}">${tag}</div>
  `;

  card.innerHTML = cardTemplate;

  // Append the card to the appropriate column
  const targetColumn = Array.from(kanbanColumns).find(
    (column) => column.querySelector("h5").textContent.trim() === tag
  );

  if (targetColumn) {
    targetColumn.querySelector(".kanban-cards").appendChild(card);
  } else {
    // If the target column doesn't exist, default to the "To Do" column
    const todoColumn = kanbanColumns[0]; // First column is "To Do"
    todoColumn.querySelector(".kanban-cards").appendChild(card);
  }
}

addBtn.addEventListener("click", (e) => {
  e.preventDefault();
  let noteTitle = titleTag.value;
  let noteDesc = descTag.value;

  if (selectedTag && (noteTitle || noteDesc)) {
    // Create a new Kanban card dynamically
    createKanbanCard(noteTitle, noteDesc, selectedTag, selectedTagColor);

    // Add the task to your notes array
    const newTask = {
      id: generateUniqueId(),
      title: noteTitle,
      description: noteDesc,
      tag: selectedTag,
      tagColor: selectedTagColor,
    };
    notes.push(newTask);

    // Save tasks to local storage

    // Clear the input fields
    titleTag.value = "";
    descTag.value = "";

    // Close the popup
    closeIcon.click();
  } else {
    alert("Please select a tag and fill in the title or description.");
  }
});


// Add a dragover event listener to all Kanban columns
kanbanColumns.forEach((column) => {
  column.addEventListener("dragover", (e) => {
    e.preventDefault();
    column.classList.add("hover");
  });

  column.addEventListener("dragleave", (e) => {
    e.preventDefault();
    column.classList.remove("hover");
  });
});

// Add a drop event listener to all Kanban columns
kanbanColumns.forEach((column) => {
  column.addEventListener("drop", (e) => {

    if (draggedCard) {
      // Move the card to the new column
      column.querySelector(".kanban-cards").appendChild(draggedCard);

      // Update the card's status
      const newStatus = column.querySelector("h5").textContent.trim();
      const cardId = draggedCard.getAttribute("data-id");
      const updatedTask = notes.find((task) => task.id === cardId);
      if (updatedTask) {
        updatedTask.tag = newStatus;
        // Update the task's status in your data storage
      }

      // Reset the draggedCard variable
      draggedCard = null;
    }
  });
});

// Generate a unique ID for each card
function generateUniqueId() {
  return Date.now().toString(36) + Math.random().toString(36).substring(2);
}

// Event listener for radio buttons to update the selected tag
const tagRadioButtons = document.querySelectorAll('input[name="radio"]');

tagRadioButtons.forEach((radio) => {
  radio.addEventListener("click", () => {
    selectedTag = radio.nextElementSibling.textContent.trim();
    selectedTagColor = tagColors[selectedTag];
  });
});
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  display: flex;
  background: #f8f0ff;
  font-size: 17px;
}

.sidebar {
  position: sticky;
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  height: 100vh;
  padding: 0 1.7rem;
  color: white;
  overflow: hidden;
  transition: all 0.5s linear;
  background: white;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

.sidebar:hover {
  width: 240px;
  transition: 0.5s;
}

.menu {
  height: 88%;
  position: relative;
  list-style: none;
  bottom: 1rem;
  padding-top: 5px;
  margin-bottom: 2rem;
  margin-top: 2rem;
}

.menu li {
  padding: 1rem;
  margin: 8px 0;
  border-radius: 8px;
  transition: all 0.5s ease-in-out;
}

.logo {
  height: 70px;
  align-items: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 3px;
  padding-top: 20px;
  padding-right: 1rem;
  padding-bottom: 20px;
  color: #69665C;
  overflow: hidden;
  display: flex;
}

.logoimg {
  width: 42px;
  height: 42px;
  margin-right: 15px;
}

.logo h2 {
  display: flex;
  align-items: center;
}

.dash:hover,
.dash {
  background-color: #FFF9DE;
}

.personal:hover,
#personal:active {
  background-color: #D2CEFF;
}

.work:hover,
.work:active {
  background-color: #D1E5F7;
}

.school:hover,
.school:active {
  background-color: #FFCECE;
}

.coding:hover,
.coding:active {
  background-color: #DAF2D6;
}

.logout:hover {
  background-color: gray;
}

.logout:hover span {
  color: white;
}

.menu a {
  color: #69665C;
  font-size: 1rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.menu a span {
  overflow: hidden;
}

.menu a i {
  font-size: 1.2rem;
}

.fas.fa-user {
  color: #FFB843;
}

.fas.fa-clipboard {
  color: #7875A9;
}

.fas.fa-folder-open {
  color: #7DA9D6;
}

.fas.fa-book {
  color: #FF8E8E;
}

.fas.fa-laptop-code {
  color: #7BC683;
}

.fa-solid.fa-arrow-right-from-bracket {
  color: red;
}

.logout {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
}


/* MAIN YUNG SA RIGHT */


/* MAIN YUNG SA RIGHT */


/* MAIN YUNG SA RIGHT */

.main {
  position: relative;
  width: 100%;
  padding: 1rem;
  color: #69665C;
}

.header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background: white;
  border-radius: 10px;
  padding: 10px 2rem;
}

.header-wrapper img {
  max-width: 50px;
  border-radius: 50%;
}


/* /////MAIN YUNG SA RIGHT */


/* MAIN YUNG SA RIGHT */


/* MAIN YUNG SA RIGHT */


/*yung notes*/


/* Add this CSS for the to-do cards */

.todo-card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.todo-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 280px;
}

.todo-card-footer {
  text-align: right;
  font-size: 1rem;
}

.todo-card-header h3 {
  margin: 0;
  max-width: 260px;
}

.delete-btn {
  cursor: pointer;
  color: red;
}

.fas.fa-trash {
  color: red;
}

.todo-text {
  width: 100%;
  border: none;
  resize: none;
  padding: 0;
  margin: 10px 0;
  font-size: 16px;
}


/* POP UP PAG INADD */

.popup-box {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
  color: #69665C;
}

.popup-box .popup {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1000;
  max-width: 700px;
  width: 100%;
  transform: translate(-50%, -50%);
  justify-content: center;
}

.popup-box,
.popup-box .popup {
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
}

.popup-box.show,
.popup-box.show .popup {
  opacity: 1;
  pointer-events: auto;
}

.popup .content {
  background: lavender;
  border-radius: 15px;
  width: calc(100% - 50px);
}

.popup .content header {
  padding: 15px 25px;
  border-bottom: 1px solid #69665C;
}

.content header p {
  font-size: 20px;
  font-weight: 500;
}

.content header i {
  color: #69665C;
  cursor: pointer;
  font-size: 23px;
}

.content header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.content form {
  margin: 15px 25px 20px;
}

.content form .row {
  margin-bottom: 20px;
}

form .row label {
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
}

.content form :where(input,
textarea,
select) {
  width: 100%;
  height: 50px;
  outline: none;
  font-size: 1rem;
  padding: 0px 15px;
  border-radius: 10px;
}

.content form textarea {
  height: 150px;
  resize: none;
  padding: 8px 15px;
}

.content form button {
  width: 100%;
  height: 50px;
  border: none;
  background: #5D5A8C;
  outline: none;
  font-size: 1rem;
  font-weight: 500;
  color: white;
  border-radius: 10px;
  cursor: pointer;
}

.popup {
  display: flex;
  justify-content: center;
}


/* ADD TASK */

.addBox {
  margin: 1rem 0;
  background: #7875A9;
  color: white;
  text-align: center;
  padding: .5rem;
  border-radius: 10px;
  justify-content: center;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.addBox:hover {
  background: #5D5A8C;
}

.addBox:active {
  transform: scale(1.01);
}

.add i {
  font-size: 2rem;
}

.add p {
  font-size: 0.8rem;
}


/* ADD TASK TAPOS */


/* tags */

.btn-radio {
  display: inline-block;
}

.btn-radio input[type="radio"] {
  display: none;
}

.btn-radio input[type="radio"]+label span {
  display: inline-block;
  height: 100%;
  margin-right: 5px;
  padding: 3px 7px;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 5px;
  background-color: #fff;
  font-size: 1rem;
}

.btn-radio input[type="radio"]:checked+label span {
  background-color: #ccc;
}

.btn-radio i {
  padding-right: 5px;
}


/* Kanban Board */

.kanban-board {
  display: flex;
  justify-content: space-between;
  margin: 1rem 0;
}

.kanban-column {
  flex: 1;
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  margin: 0 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.kanban-column h5 {
  margin-bottom: 10px;
  padding: 0 0 10px 0px;
  border-bottom: 1px solid #69665C;
  color: #69665C;
}

.kanban-cards {
  min-height: 500px;
  /* Adjust the minimum height as needed */
}


/* Kanban Card */

.kanban-card {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  margin: 10px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.kanban-card h4 {
  font-size: .9rem;
  margin: 0;
  padding-bottom: 10px;
  font-weight: bold;
}

.kanban-card p {
  font-size: .8rem;
  margin: 0;
}

.kanban-card-tag {
  display: inline-block;
  padding: 2px 5px;
  border-radius: 4px;
  color: white;
  font-size: .8rem;
  margin-top: 10px;
}


/* Define different styles for different card tags */

.kanban-card.tag-Personal {
  border-left: 3px solid #7875A9;
}

.kanban-card.tag-Work {
  border-left: 3px solid #7DA9D6;
}

.kanban-card.tag-School {
  border-left: 3px solid #FF8E8E;
}

.kanban-card.tag-Coding {
  border-left: 3px solid #7BC683;
}


/* Card Dragging Styles */

.kanban-card.is-dragging {
  opacity: 0.5;
}


/* Card Placeholder Styles */

.kanban-card-placeholder {
  background-color: #ddd;
  height: 150px;
  /* Adjust the height as needed */
  border: 1px dashed #333;
  border-radius: 8px;
  margin-bottom: 10px;
}
<!-- Font Awesome Cdn Link -->
<script src="https://kit.fontawesome.com/04558dcba4.js" crossorigin="anonymous"></script>

<!-- POP UP PAG DRINAG -->
<div class="popup-box">
  <div class="popup">
    <div class="content">
      <header>
        <p>New Task</p>
        <i class="fa-solid fa-circle-xmark"></i>
      </header>
      <form action="#">
        <div class="row title">
          <label for="title">Title</label>
          <input id="title" placeholder="Enter your to-do here">
        </div>
        <div class="row description">
          <label for="desc">Description</label>
          <textarea id="desc" placeholder="Provide additional details..."></textarea>
        </div>



        <div class="row dropdown">
          <label>Tags</label>

          <div class="btn-radio" id="radio">
            <input type="radio" id="radio01" name="radio" />
            <label for="radio01"><span><i class="fas fa-clipboard"></i>Personal</span></label>
          </div>
          <div class="btn-radio">
            <input type="radio" id="radio02" name="radio" />
            <label for="radio02"><span><i class="fas fa-folder-open"></i>Work</span></label>
          </div>
          <div class="btn-radio">
            <input type="radio" id="radio03" name="radio" />
            <label for="radio03"><span><i class="fas fa-book"></i>School</span></label>
          </div>
          <div class="btn-radio">
            <input type="radio" id="radio04" name="radio" />
            <label for="radio04"><span><i class="fas fa-laptop-code"></i>Coding</span></label>
          </div>

        </div>
        <button>Add Task</button>
      </form>

    </div>
  </div>

</div>
<!-- DONE DRAG -->




<div class="sidebar">
  <div class="logo">
    <h2><img src="doit.png" class="logoimg"><span>DoIt!</span></h2>
  </div>

  <ul class="menu">
    <li class="dash">
      <a href="#">
        <i class="fas fa-user"></i>
        <span>Home</span>
      </a>
    </li>

    <li class="personal" id="personal" draggable="true">
      <a href="#">
        <i class="fas fa-clipboard"></i>
        <span>Personal</span>
      </a>
    </li>

    <li class="work">
      <a href="#">
        <i class="fas fa-folder-open"></i>
        <span>Work</span>
      </a>
    </li>
    <li class="school">
      <a href="#">
        <i class="fas fa-book"></i>
        <span>School</span>
      </a>
    </li>
    <li class="coding">
      <a href="#">
        <i class="fas fa-laptop-code"></i>
        <span>Coding</span>
      </a>
    </li>
    <li class="logout">
      <a href="#">
        <i class="fa-solid fa-arrow-right-from-bracket"></i>
        <span>Log out</span>
      </a>
    </li>
  </ul>
</div>
<!-- main sa right -->
<div class="main">
  <div class="header-wrapper">
    <div class="header-title">
      <h2>Home</h2>
    </div>
    <img src="rimuru.jpg" alt="">
  </div>

  <!-- BUTTON PARA SA ADD -->
  <div class="addBox">
    <i class="fa-solid fa-plus"></i>
    <p>Add Task</p>
  </div>

  <div class="kanban-board">
    <!-- To Do Column -->
    <div class="kanban-column">
      <h5>To do</h5>

      <div class="kanban-cards" id="todo-cards"></div>

    </div>

    <!-- In Progress Column -->
    <div class="kanban-column in-progress">
      <h5>In progress</h5>
      <div class="kanban-cards" id="inprogress-cards"></div>
    </div>

    <!-- Completed Column -->
    <div class="kanban-column">
      <h5>Completed</h5>
      <div class="kanban-cards" id="completed-cards"></div>
    </div>
  </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.