使用 TypeScript 實現(xiàn)可拖拽排序列表

更新時間：2026年05月25日 10:01:00 作者：Raink老師

本文介紹了使用TypeScript構建可視化拖拽排序列表的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

項目預覽

我們將構建一個這樣的拖拽排序列表：

每個列表項都可以被拖拽；
拖動過程中有視覺反饋（高亮、透明、旋轉等效果）；
拖動結束后會自動調整 DOM 順序；
支持在列表中上下插入、重新排序。

效果預覽：

?? 拖拽排序列表：

一、HTML + CSS：創(chuàng)建結構與樣式

我們首先定義一個列表的結構，并配以簡潔、美觀的樣式：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <title>拖拽排序列表</title>
    <style>
      body {
        font-family: 'Poppins', sans-serif;
        padding: 20px;
        background: linear-gradient(to right, #6a11cb, #2575fc);
        color: #fff;
        text-align: center;
      }
      h2 {
        margin-bottom: 20px;
        font-size: 1.8em;
      }
      .list {
        list-style: none;
        padding: 0;
        width: 350px;
        margin: auto;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
      }
      .item {
        padding: 15px 20px;
        margin: 8px 0;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 5px;
        font-size: 1.1em;
        color: #333;
        font-weight: bold;
        cursor: grab;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: background 0.2s, transform 0.2s;
      }
      .item:hover {
        background: #e8f0ff;
        transform: scale(1.03);
      }
      .dragging {
        opacity: 0.7;
        transform: rotate(-2deg);
      }
      .over {
        border: 2px dashed #ff8c42;
        background: #fff3e0;
      }
    </style>
  </head>
  <body>
    <h2>拖拽排序列表</h2>
    <ul class="list">
      <li class="item" draggable="true">項目 1</li>
      <li class="item" draggable="true">項目 2</li>
      <li class="item" draggable="true">項目 3</li>
      <li class="item" draggable="true">項目 4</li>
      <li class="item" draggable="true">項目 5</li>
    </ul>
    <script defer src="lists.js"></script>
  </body>
</html>

? 每個 <li> 元素都有 draggable="true" 屬性，確保它可以被拖動。

二、TypeScript：核心拖拽邏輯

以下是 TypeScript 實現(xiàn)的拖拽交互邏輯，我們使用 dragstart、dragend、dragover 三個事件來控制拖拽過程：

const list = document.querySelector('.list') as HTMLElement | null;
let dragging: HTMLElement | null = null;
if (list) {
  list.addEventListener('dragstart', (e: DragEvent) => {
    const target = e.target as HTMLElement;
    if (target && target.classList.contains('item')) {
      dragging = target;
      target.classList.add('dragging');
    }
  });
  list.addEventListener('dragend', () => {
    if (dragging) {
      dragging.classList.remove('dragging');
    }
    document.querySelectorAll('.item')
      .forEach(item => item.classList.remove('over'));
    dragging = null;
  });
  list.addEventListener('dragover', (e: DragEvent) => {
    e.preventDefault();
    const afterElement = getDragAfterElement(list, e.clientY);
    document.querySelectorAll('.item')
      .forEach(item => item.classList.remove('over'));
    if (afterElement && dragging) {
      afterElement.classList.add('over');
      list.insertBefore(dragging, afterElement);
    } else if (dragging) {
      list.appendChild(dragging);
    }
  });
}
function getDragAfterElement(container: HTMLElement, y: number): HTMLElement | null {
  const items = Array.from(container.querySelectorAll<HTMLElement>('.item:not(.dragging)'));
  return items.reduce((closest, child) => {
    const box = child.getBoundingClientRect();
    const offset = y - box.top - box.height / 2;
    if (offset < 0 && offset > closest.offset) {
      return { offset, element: child };
    }
    return closest;
  }, { offset: Number.NEGATIVE_INFINITY, element: null as HTMLElement | null }).element;
}