使用 TypeScript 实现可拖拽排序列表
作者：Raink老师
本文介绍了使用TypeScript构建可视化拖拽排序列表的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
在现代 Web 应用中，拖拽排序是一种非常常见的交互方式，能够让用户更加直观地对数据进行管理。本文将手把手带你用 TypeScript 构建一个简单但视觉精美、交互流畅的可拖拽排序列表（sortable list）。
项目预览
我们将构建一个这样的拖拽排序列表：
- 每个列表项都可以被拖拽；
- 拖动过程中有视觉反馈（高亮、透明、旋转等效果）；
- 拖动结束后会自动调整 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 可拖拽排序列表内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！