使用 TypeScript 实现可拖拽排序列表

更新时间：2026年05月25日 10:01:00 作者：Raink老师

本文介绍了使用TypeScript构建可视化拖拽排序列表的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

项目预览

我们将构建一个这样的拖拽排序列表：

每个列表项都可以被拖拽；
拖动过程中有视觉反馈（高亮、透明、旋转等效果）；
拖动结束后会自动调整 DOM 顺序；
支持在列表中上下插入、重新排序。

效果预览：

🎯 拖拽排序列表：

一、HTML + CSS：创建结构与样式

我们首先定义一个列表的结构，并配以简洁、美观的样式：

<!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 实现的拖拽交互逻辑，我们使用 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;
}

三、编译为 JavaScript

浏览器无法直接执行 TypeScript，需要通过 tsc 命令将其编译为 JavaScript：

tsc lists.ts

这条命令会将 lists.ts 编译为 lists.js，浏览器就可以直接加载和运行了。

四、总结

通过 TypeScript 和现代浏览器的原生拖拽 API，我们可以非常方便地实现一个交互性强、界面友好的可拖拽列表。整个过程不仅提升了用户体验，同时也加深了对 DOM 操作与事件流的理解。

到此这篇关于使用 TypeScript 实现可拖拽排序列表的文章就介绍到这了,更多相关TypeScript 可拖拽排序列表内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript中this的绑定你知道几种?
this对于一些有经验的JavaScript开发者来说是一种非常复杂的机制。并且很多开发者对于this的理解并不是很清晰，导致在面试的时候经常受挫。今天我们就来看一看这个this真的有那么难吗
2023-02-02
JavaScript正则表达式校验与递归函数实际应用实例解析
这篇文章主要介绍了JavaScript正则表达式校验与递归函数实际应用,需要的朋友可以参考下
2017-08-08
javascript字母大小写转换的4个函数详解
这篇文章主要介绍了javascript字母大小写转换的4个函数详解,需要的朋友可以参考下
2014-05-05
D3.js中data(), enter() 和 exit()的问题详解
相信大多数人对D3.js并不陌生。这是一个由纽约时报可视化编辑 Mike Bostock与他斯坦福的教授和同学合作开发的数据文件处理的JavaScript Library，全称叫做Data-Driven Documents，在d3.js中data(), enter() 和 exit()比较常见，下面给大家就这方面的知识给大家详解
2015-08-08
JS实现将手机号中间的几位数字变成****功能
这篇文章主要介绍了用js如何实现将手机号中间的几位数字变成**** _,今天，我们要实现一个很常见并且简单的功能如何将手机号中间的几位数变成****，需要的朋友可以参考下
2023-09-09
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
这篇文章主要介绍了JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求的相关资料,需要的朋友可以参考下
2017-10-10
javascript自定义右键菜单插件
这篇文章主要为大家详细介绍了javascript自定义右键菜单插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
小程序实现列表多个批量倒计时
这篇文章主要为大家详细介绍了小程序实现列表多个批量倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-02-02
ThingJS粒子特效一键实现雨雪效果
在做3D项目时，我们经常需要模拟下雨，下雪的天气，有时也会模拟喷泉、着火等效果。这些效果需要使用名为粒子系统(particle)的技术来实现。使用ThingJS可以快速编写粒子效果，本文就来看看如何实现
2021-05-05
详解JavaScript中哪一种循环最快呢
这篇文章主要介绍了详解JavaScript中哪一种循环最快呢，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03