Sortable.js 演示

强大的拖拽排序库,支持各种场景

拖拽排序

直观的拖拽操作

触屏支持

完美的移动端体验

高度可定制

丰富的配置选项

0 总操作次数
0 移动项目数
0 活跃列表数
0 会话时长(秒)

基础列表排序

控制选项
  • JavaScript
    动态编程语言
    前端
  • Python
    通用编程语言
    后端
  • React
    前端框架
    框架
  • Node.js
    JavaScript运行时
    运行时
  • MongoDB
    NoSQL数据库
    数据库

看板拖拽

待办事项 拖拽任务到其他列
设计用户界面
创建响应式设计原型
UI 设计
编写API文档
完善接口说明和示例
文档 API
数据库设计
设计数据模型和关系
数据库
进行中 当前工作任务
前端组件开发
实现可复用的UI组件
React 组件
单元测试
编写核心功能测试用例
测试
已完成 完成的任务
项目初始化
配置开发环境和工具
配置

网格拖拽排序

工具箱
拖拽重新排列工具
代码编辑器
设计工具
数据库
服务器
调试器
分析工具
安全扫描
部署工具

表格行排序

ID 姓名 职位 部门 状态
001 张三 前端开发 技术部 在职
002 李四 后端开发 技术部 在职
003 王五 UI设计师 设计部 请假
004 赵六 产品经理 产品部 在职
005 钱七 测试工程师 质量部 在职

多列表交换

可用成员
  • Alice Johnson
    全栈开发
  • Bob Smith
    前端专家
  • Carol Wilson
    UI/UX设计师
  • David Brown
    DevOps工程师
项目A团队
  • Eve Davis
    项目经理
  • Frank Miller
    后端开发
项目B团队
  • Grace Lee
    技术主管

嵌套拖拽排序

前端开发
HTML基础
CSS样式
JavaScript
ES6特性
异步编程
后端开发
Node.js
数据库设计
MySQL
MongoDB
工具和部署
Git版本控制
Docker容器

操作日志

实时日志
[系统] 拖拽排序演示已准备就绪
[提示] 开始拖拽元素查看实时日志

使用教程

1
基础拖拽

点击并拖拽任意元素到新位置,松开鼠标完成排序。支持手柄拖拽和整个元素拖拽。

2
跨列表移动

在看板和多列表示例中,可以将元素从一个列表拖拽到另一个列表。

3
网格重排

在网格布局中拖拽元素将自动重新排列其他元素位置。

4
表格行排序

拖拽表格行的拖拽手柄来重新排序表格数据。

5
嵌套排序

支持多层嵌套的拖拽排序,可以在不同层级间移动元素。