拖放排序插件Sortable.js

最新推荐文章于 2025-09-26 01:57:12 发布

原创

最新推荐文章于 2025-09-26 01:57:12 发布 · 731 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

Sortable.js是一个功能强大的JavaScript插件，支持触屏设备和大部分浏览器的拖放排序功能，适用于IE9以上。它允许用户在列表容器间拖拽排序，具有CSS动画支持和自定义选项。文章详细介绍了Sortable.js的创建方法、配置项及其各种事件监听器，如onStart、onEnd等。

Sortable.js是一款轻量级的拖放排序列表的js插件（虽然体积小，但是功能很强大）
先附上插件下载地址：

1.官方GTIHUB:https://github.com/SortableJS/Sortable
特点

支持触屏设备和大部分浏览器（IE9以下的就不支持了，原因都懂得）
可以从一个列表容器中拖拽一个列表单元到其他容器或本列表容器中进行排序移动
表单元时有css动画
支持拖放操作和可选择的文本（这句我也没理解，大概意思就是对原生的拖放进行拓展了）
例子

<ul id="items">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

可以通过Sorable对象中的create方法创建

var el = document.getElementById('items');
var sortable = Sortable.create(el,{});

配置项：

var sortable = new Sortable(el, {
    group: "name", // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
    sort: true, // boolean 定义是否列表单元是否可以在列表容器内进行拖拽排序
    delay: 0, // number 定义鼠标选中列表单元可以开始拖动的延迟时间；
    touchStartThresho