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#写的特别详细。