uni-app vue使用Sortable.js拖拽效果

效果如下：

 

因為為了小程序增加用戶體驗，我們小程序就會攜帶一些拖拽或者拖拽刪除等等效果。在測試了一些組件后感覺，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#寫的特別詳細。