使用 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 可拖拽排序列表内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS代码判断IE6,IE7,IE8,IE9的函数代码
JS代码判断浏览器版本,支持IE6,IE7,IE8,IE9！做网页有时候会用到JS检测IE的版本，下面是检测Microsoft Internet Explorer版本的三种代码
2013-08-08
JavaScript通过nodejs进行后端开发的过程
本文系统介绍了Node.js后端开发流程,涵盖环境搭建、HTTP服务器创建（http/Express）、路由中间件、数据库集成（MongoDB/MySQL）、JWT认证、文件上传、错误处理及部署（PM2/Docker）,并提供项目结构建议,助你快速构建应用,感兴趣的朋友一起看看吧
2025-06-06
PHP捕捉异常中断的方法
相信每位PHP程序员都知道，当PHP程序出现异常情况，如出现致命错误、超时或者不可知的逻辑错误导致程序中断，这个时候就可以用 register_shutdown_function进行异常处理。下面本文给出了详细的示例代码，有需要的朋友们下面来一起看看吧。
2016-10-10
微信小程序实现横向滚动导航栏效果
这篇文章主要介绍了微信小程序实现横向滚动导航栏效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-12-12
bootstrap-table+treegrid实现树形表格
这篇文章主要为大家详细介绍了bootstrap-table+treegrid实现树形表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
JavaScript对象扩展方法的用法详解
JavaScript对象中的可扩展性指的是：是否可以给对象添加新属性。所有的内置对象和自定义对象显示的都是可扩展的，对于宿主对象，则由JavaScript引擎决定
2022-11-11
js图片自动切换效果处理代码
自己设置每张图片切换的时间间隔，自己设置每张图片的路径（绝对、相对路径都可以）虽然很简单，但是很实用
2013-05-05
Javscript调用iframe框架页面中函数的方法
这篇文章主要介绍了Javscript调用iframe框架页面中函数的方法,可实现iframe之间传值或修改值,是非常实用的技巧,需要的朋友可以参考下
2014-11-11
JavaScript常用函数工具集：lao-utils
现在Javascript库海量，流行的也多，比如jQuery，YUI等，虽然功能强大，但也是不万能的，功能不可能涉及方方面面，这里给大家分享一个的JS库是对这些的补充，很多也比较实用，把应用到项目中中去也比较方面，这也是对工作的一些积累，也加深对知识的理解。
2016-03-03
用JS动态设置CSS样式常见方法小结(推荐)
本文给大家总结了js动态设置css样式的常见方法，非常实用，对js设置css样式相关知识感兴趣的朋友一起学习吧
2016-11-11