拖拽排序功能（sortable.js）

在最近的工作中涉及到了拖拽排序的功能，在网上寻找了很久，大致分为两种：Sortable.js与H5的drag。这里和大家分享一下sortable.js进行拖拽排序。
首先第一步当然是先下载此插件，插件地址是：sortable.js下载  
第二步当然就是查看API文档了，因为此文档是英文的，所以找了个国内的中文文档，文档地址是：sortable.js中文文档  
接下来就是创建一个小的拖拽排序的demo
先是html代码：

<div id="container" class="container">
     <ul id="main" class="main">
         <li>我是第一个</li>
         <li>我是第二个</li>
         <li>我是第三个</li>
         <li>我是第四个</li>
         <li>我是第五个</li>
     </ul>
 </div>

接下来是CSS代码：

.container {
         width: 70px;
         height: 250px;
     } 
    .main {
         list-style: none;
         height: 250px;
         background: tan;
     }
     .main li {
         width: 100px;
         height: 50px;
         background: burlywood;
         line-height: 50px;
         text-align: center;
     }

接下来是js代码：

<script src="Sortable.js"></script>
<script>
    var el = document.getElementById("main");
    var sortable = new Sortable(el, {
        group: {
            name: 'name',
            pull: false,
            put: false
        },
        animation: 150,
        onAdd: function(evt) {
            console.log('onAdd.bar:', evt.item);
        },
        onUpdate: function(evt) {
            console.log('onUpdate.bar:', evt.item);
        },
        onRemove: function(evt) {
            console.log('onRemove.bar:', evt.item);
        },
        onStart: function(evt) {
            console.log('onStart.foo:', evt.item);
        },
        onEnd: function(evt) {
            console.log('onEnd.foo:', evt.item);
        }
    })
</script>

详细的操作请查看中文文档

文章写的越来越好了哦