实现拖拽来调整表格顺序

2023-09-08 18:10:59

前言

在许多情况下，我们需要能够在表格中调整行的顺序，例如，在电子商务网站上，您可能需要调整商品的顺序以匹配不同的搜索结果或产品类别。在项目管理应用程序中，您可能需要重新排列任务以反映任务的优先级或完成状态。

实现拖拽功能可以允许用户通过单击并拖动行来轻松地重新排列行。这比使用传统的“上移”和“下移”按钮更直观和用户友好。

实现步骤

添加必要的HTML代码

首先，我们需要添加必要的HTML代码来创建表格。我们将使用一个简单的HTML表格，其中包含三列：ID、名称和价格。

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>名称</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>产品1</td>
      <td>$10.00</td>
    </tr>
    <tr>
      <td>2</td>
      <td>产品2</td>
      <td>$20.00</td>
    </tr>
    <tr>
      <td>3</td>
      <td>产品3</td>
      <td>$30.00</td>
    </tr>
  </tbody>
</table>

添加必要的CSS样式

接下来，我们需要添加一些CSS样式来美化表格并使其更具交互性。我们将使用CSS的“cursor”属性来改变鼠标悬停在表格行上的时的光标样式，并使用“transition”属性来创建平滑的拖放动画。

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 5px;
}

tbody tr {
  cursor: grab;
}

tbody tr:active {
  cursor: grabbing;
}

tbody tr.dragging {
  background-color: #f2f2f2;
  transition: all 0.2s ease-in-out;
}

添加JavaScript代码

最后，我们需要添加JavaScript代码来实现拖放功能。我们将使用HTML5的“dragstart”、“dragenter”、“dragover”和“drop”事件来检测和处理拖放操作。

// 获取表格元素
const table = document.querySelector('table');

// 获取所有行元素
const rows = document.querySelectorAll('tbody tr');

// 循环遍历行元素，添加拖放事件监听器
rows.forEach(row => {
  // 添加"dragstart"事件监听器
  row.addEventListener('dragstart', (e) => {
    // 设置被拖拽行的ID属性，以便在"drop"事件中获取
    e.dataTransfer.setData('rowId', row.id);

    // 设置拖拽行样式
    row.classList.add('dragging');
  });

  // 添加"dragenter"事件监听器
  row.addEventListener('dragenter', (e) => {
    // 如果当前行不是被拖拽的行，则允许放置
    if (row.id !== e.dataTransfer.getData('rowId')) {
      row.classList.add('over');
    }
  });

  // 添加"dragover"事件监听器
  row.addEventListener('dragover', (e) => {
    // 阻止默认的拖放操作，以便我们能够自定义拖放行为
    e.preventDefault();
  });

  // 添加"drop"事件监听器
  row.addEventListener('drop', (e) => {
    // 获取被拖拽行的ID属性
    const rowId = e.dataTransfer.getData('rowId');

    // 获取被拖拽行元素
    const draggedRow = document.getElementById(rowId);

    // 获取当前行元素
    const currentRow = row;

    // 如果当前行不是被拖拽的行，则交换两行的顺序
    if (draggedRow !== currentRow) {
      draggedRow.parentNode.insertBefore(draggedRow, currentRow);
    }

    // 移除"dragging"和"over"样式
    draggedRow.classList.remove('dragging');
    currentRow.classList.remove('over');
  });
});