拖放排序插件Sortable.js

经测试，Sortable.js 兼容好和使用方便都是比较不错的，特别手机端使用很棒

介绍

Sortable.js是一款轻量级的拖放排序列表的js插件（虽然体积小，但是功能很强大）
下载地址：https://github.com/RubaXa/Sor...
官方DEMO：http://rubaxa.github.io/Sorta...

 

特点

• 支持触屏设备和大部分浏览器（IE9以下的就不支持了，原因都懂得）

• 可以从一个列表容器中拖拽一个列表单元到其他容器或本列表容器中进行排序

• 移动列表单元时有css动画

• 支持拖放操作和可选择的文本（这句我也没理解，大概意思就是对原生的拖放进行拓展了）

• 非常友善的滚动效果

• 基于原生HTML5中的拖放API

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

• 支持所有的css框架，像Bootstrap

• 简单的API，方便使用

• CDN

• 不依赖jQuery

VUE框架中使用，见这里：http://www.cnblogs.com/xiangsj/p/7278663.html

使用举例

 

<script src="../js/sortable.min.js?v=0.0"></script>
var el = document.getElementById('items');
new Sortable(el);
//常用
new Sortable(el, {   
    handle: ".my-handle", // 拖拽区域，默认为 items 的 子元素
    
    onStart: function (/**Event*/evt) { // 拖拽开始
        var itemEl = evt.item;// 当前拖拽的html元素
    },
 
    onEnd: function (/**Event*/evt) { // 拖拽结束
        var itemEl = evt.item;
    }    
});

 

如是2组之间拖放：

 

new Sortable(document.getElementById('C_fieldSet_01'), {
            group: ".C_move",
            handle: ".C_move"
        });
        new Sortable(document.getElementById('C_fieldSet_02'), {
            g