拖拽卡片组件：从 0 到 1 的实现

2024-01-13 13:17:26

前言

拖拽卡片组件是一种流行的交互元素，它允许用户通过拖动鼠标来重新排列或组织卡片。这种组件通常用于任务管理、项目规划和电子商务等应用中。

构建拖拽卡片组件

1. 设计结构和样式

首先，我们需要设计拖拽卡片组件的结构和样式。我们可以使用 HTML 和 CSS 来实现这一点。

HTML 代码如下：

<div class="card-container">
  <div class="card">
    <div class="card-header">
      <span class="card-title">Card Title</span>
      <span class="card-close">X</span>
    </div>
    <div class="card-body">
      Card Content
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <span class="card-title">Card Title</span>
      <span class="card-close">X</span>
    </div>
    <div class="card-body">
      Card Content
    </div>
  </div>
</div>

CSS 代码如下：

.card-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card {
  width: 200px;
  height: 200px;
  margin: 10px;
  border: 1px solid black;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.card-header {
  background-color: #f5f5f5;
  padding: 10px;
}

.card-title {
  font-weight: bold;
}

.card-close {
  float: right;
  cursor: pointer;
}

.card-body {
  padding: 10px;
}

2. 添加拖拽功能

接下来，我们需要添加拖拽功能。我们可以使用 JavaScript 来实现这一点。

JavaScript 代码如下：

const cards = document.querySelectorAll('.card');
cards.forEach((card) => {
  card.addEventListener('mousedown', (e) => {
    const cardRect = card.getBoundingClientRect();
    const offsetX = e.clientX - cardRect.left;
    const offsetY = e.clientY - cardRect.top;

    const moveCard = (e) => {
      const newX = e.clientX - offsetX;
      const newY = e.clientY - offsetY;
      card.style.left = `${newX}px`;
      card.style.top = `${newY}px`;
    };

    const dropCard = () => {
      document.removeEventListener('mousemove', moveCard);
      document.removeEventListener('mouseup', dropCard);
    };

    document.addEventListener('mousemove', moveCard);
    document.addEventListener('mouseup', dropCard);
  });
});