SortableJS

功能强大的JavaScript 拖拽库

特性

兼容性好

支持触屏设备和大部分浏览器

简单

简单的API，方便使用

原生

基于原生HTML5中的拖放API

CSS框架兼容性

支持所有的css框架，像Bootstrap

零依赖

不依赖Jquery等其他框架

SPA支持良好

支持多种框架（angular、vue、react等）

    安装

    npm安装

    npm install sortablejs --save

    bower安装

    bower install --save sortablejs

    script引入

    <script src="../../js/Sortable.min.js"></script>

    Demo

    简单列表拖拽

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
                                            
                                        new Sortable(example1, {
                                            animation: 150,
                                            ghostClass: 'blue-background-class'
                                        });

    多列表相互拖拽

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
                                            
                                                new Sortable(example2Left, {
                                                    group: 'shared', // set both lists to same group
                                                    animation: 150
                                                });
                                                
                                                new Sortable(example2Right, {
                                                    group: 'shared',
                                                    animation: 150
                                                });

    克隆

    通过拖拽复制节点

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
                                            
                                                new Sortable(example3Left, {
                                                    group: {
                                                        name: 'shared',
                                                        pull: 'clone' // To clone: set pull to 'clone'
                                                    },
                                                    animation: 150
                                                });
                                                
                                                new Sortable(example3Right, {
                                                    group: {
                                                        name: 'shared',
                                                        pull: 'clone'
                                                    },
                                                    animation: 150
                                                });

    禁止sorting

    坐标的列表无法进行排序，因为设置了禁止sort, 但是你还是可以从左边拖拽到右边

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
                
                    new Sortable(example4Left, {
                        group: {
                            name: 'shared',
                            pull: 'clone',
                            put: false // 不允许拖拽进这个列表
                        },
                        animation: 150,
                        sort: false // 设为false，禁止sort
                    });
                    
                    new Sortable(example4Right, {
                        group: 'shared',
                        animation: 150
                    });

    Handle

      Item 1
      Item 2
      Item 3
      Item 4
      Item 5
      Item 6
                
                    new Sortable(example5, {
                        handle: '.handle', // handle's class
                        animation: 150
                    });

    过滤

    试图拖拽的时候背景会变成红色. 但是无法完成拖拽，因为被过滤器filter选项排除在外filter option.

    Item 1
    Item 2
    Item 3
    Filtered
    Item 4
    Item 5
                
                    new Sortable(example6, {
                        filter: '.filtered', // 'filtered' class is not draggable
                        animation: 150
                    });

    Thresholds

    Try modifying the inputs below to affect the swap thresholds. You can see the swap zones of the squares colored in dark blue, while the "dead zones" (that do not cause a swap) are colored in light blue.

    1
    2
    Invert Swap
                

                    new Sortable(example7, {
                        swapThreshold: 1,
                        animation: 150
                    });

    例子

    Grid布局例子

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 7
    Item 8
    Item 9
    Item 10
    Item 11
    Item 12
    Item 13
    Item 14
    Item 15
    Item 16
    Item 17
    Item 18
    Item 19
    Item 20

    嵌套排序例子

    注意: 当开启嵌套排序动画的时候, 建议将 fallbackOnBody 选项设置为true。

    Item 1.1
    Item 2.1
    Item 2.2
    Item 3.1
    Item 3.2
    Item 3.3
    Item 3.4
    Item 2.3
    Item 2.4
    Item 1.2
    Item 1.3
    Item 1.4
    Item 2.1
    Item 2.2
    Item 2.3
    Item 2.4
    Item 1.5

    赞助商：

    17门前端课程，点击图片领取（感谢商家赞助，用于服务器开销，小站不易）