效果如下：
因為為了小程序增加用戶體驗，我們小程序就會攜帶一些拖拽或者拖拽刪除等等效果。在測試了一些組件后感覺，Sortable.js的效果更好。所以就給大家介紹一下用法。
一：我們就先在官網看看Sortable.js的具體用處
官網地址：http://www.sortablejs.com/index.html
我們看到官網，雖然寫的感覺有一點極簡，第一次用還有一點不理解他的意思，咋用都不知道，在測試使用，才知道其實作者的確寫的特別好。用法也特別簡單，下面我們來具體說說用法。
二：安裝或者引用組件Sortable.js
2.1:npm安裝：npm install sortablejs --save
2.2:bower安裝：bower install --save sortablejs
2.3：也可以引用：<script src="../../js/Sortable.min.js"></script>（當然有些小白就會說沒給我提供這個js文件啊，那我們可以進行查看源碼拉取官網的這個js文件，一般這種的組件庫在開發的時候就會使用ssr渲染，所以在查看源碼里面，可以看見幾乎全部的源碼，在進行自己所需要的資源拉取。）
三：安裝后就開始使用
至於這些引入注冊這里就不多說明，因為這個組件，涉及范圍還是挺廣的。
3.1:創建拖拽的元素
<ul id="foo" class="block">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
我這里用的UI，li當然各位也可以選擇自己所喜歡的標簽，id用戶獲取dom節點，Sortable.js就好進行調用。class就是我用來寫樣式的，這個沒啥大礙。
3.2：按需引入Sortable.js的配置項
<script>
Sortable.create(document.getElementById("foo"), {
animation: 150, //動畫參數
onAdd: function (evt) {
//拖拽時候添加有新的節點的時候發生該事件
console.log("onAdd.foo:", [evt.item, evt.from]);
},
onUpdate: function (evt) {
//拖拽更新節點位置發生該事件
console.log("onUpdate.foo:", [evt.item, evt.from]);
},
onRemove: function (evt) {
//刪除拖拽節點的時候促發該事件
console.log("onRemove.foo:", [evt.item, evt.from]);
},
onStart: function (evt) {
//開始拖拽出發該函數
console.log("onStart.foo:", [evt.item, evt.from]);
},
onSort: function (evt) {
//發生排序發生該事件
console.log("onSort.foo:", [evt.item, evt.from]);
},
onEnd: function (evt) {
//拖拽完畢之后發生該事件
console.log("onEnd.foo:", [evt.item, evt.from]);
},
});
</script>
當然這些事件還不止這些，大家可以在官網的配置項里面，進行選擇，當然大部分的函數作者都是備注了用在哪些地方。然后這些事情都安裝引入配置都完成了，大家就可以去測試一下了。
如果大家還是不是太清楚，可以看看這一篇：https://www.jb51.net/article/96446.htm#寫的特別詳細。