Sortable.js 使用教程

最新推荐文章于 2025-05-22 14:31:21 发布

尹田凌Luke

最新推荐文章于 2025-05-22 14:31:21 发布

阅读量548

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00601/article/details/141841258

Sortable.js 使用教程

sortableAllows you to sort ActiveRecord items in multiple lists with multiple scopes项目地址:https://gitcode.com/gh_mirrors/sortable/sortable

项目介绍

Sortable.js 是一个用于实现可重新排序的拖放列表的 JavaScript 库。它支持多种功能，如简单列表、共享列表、克隆、禁用排序、处理程序、过滤阈值等。Sortable.js 适用于多种前端框架，如 jQuery、Knockout、Meteor、Polymer 和 Ember。

项目快速启动

安装

你可以通过 NPM 或 Bower 安装 Sortable.js：

npm install sortablejs --save

或者

bower install --save sortablejs

引入

在你的项目中引入 Sortable.js：

import Sortable from 'sortablejs';

基本使用

以下是一个简单的例子，展示如何在 HTML 中使用 Sortable.js：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sortable.js 示例</title>
    <script src="path/to/sortable.min.js"></script>
</head>
<body>
    <ul id="example-list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <script>
        new Sortable(document.getElementById('example-list'), {
            animation: 150,
            ghostClass: 'blue-background-class'
        });
    </script>
</body>
</html>

应用案例和最佳实践

共享列表

你可以创建多个共享的拖放列表，使得项目可以在这些列表之间移动：

<ul id="example2-left">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<ul id="example2-right">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<script>
    new Sortable(document.getElementById('example2-left'), {
        group: 'shared',
        animation: 150
    });
    new Sortable(document.getElementById('example2-right'), {
        group: 'shared',
        animation: 150
    });
</script>

克隆

你可以设置克隆选项，使得拖动的项目在原列表中保留：

<ul id="example3-left">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<ul id="example3-right">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<script>
    new Sortable(document.getElementById('example3-left'), {
        group: {
            name: 'shared',
            pull: 'clone'
        },
        animation: 150
    });
    new Sortable(document.getElementById('example3-right'), {
        group: {
            name: 'shared',
            pull: 'clone'
        },
        animation: 150
    });
</script>