SortableJS实现本地持久化拖动排序

SortableJS官方文档

此js库主要用于拖动排序

接下来安装到我们的vue中： npm install sortablejs --save

我们给父级元素加一个id，用于方便获取dom元素，大致dom结构

由于是维护原有项目没办法使用数组循环，方便一点的话，大家可以使用v-for循环。

接下来在mounted中使用，在methods中定义函数：

dashDrag() {
      //dash面板拖拽
      let _this = this;
      let $ul = document.getElementById("list");
      let sort = new Sortable.create($ul, {
        group: "list",
        dataIdAttr: "data-id",
        handle: ".sortable-handle",
        store: {
          get: function(sortable) {
            let order = localStorage.getItem("LISTNAME");
            return order ? order.split("|") : [];
          },
          set: function(sortable) {
            // 这里是获取每次排序后新的排序数组，并将其放到本地缓存中
            let order = sortable.toArray();
            localStorage.setItem("LISTNAME", order.join("|"));
          }
        },
        animation: 150 //动画参数
      });
    },

拖动前排序：
拖动后排序

排序是可以了，但是当我们刷新页面时，又会恢复原来的排序，这不是我们想要的，但现在每一次排序后都会记录排序的数组，我们可以在本地缓存中查看。

本地缓存数据有了，接下来我们使用它，使得下次进入页面，还是上次排序后的顺序

我们可以在mounted函数中使用，也可以在dom生成后使用如下代码，
此时我们在div中定义的data-id也要排上用场了。

this.$nextTick(function() {
            //拖拽排序本地缓存持久化
            let $ul = document.getElementById("list");
            let children = Array.from($ul.children);
            let sortArr = localStorage.getItem("LISTNAME")
              ? localStorage.getItem("LISTNAME").split("|")
              : [];
            for (let i = 0, len = sortArr.length; i < len; i++) {
              let child = children.filter(val => val.dataset.id == sortArr[i]);
              if (child.length > 0) {
                $ul.appendChild(child[0]);
              }
            }
            this.$forceUpdate();
          });

大致解释下，在mounted中我们先获取排序dom节点，将dom对应转化为数组，把我们排序后生成的本地缓存，取出来，与dom节点中的data-id做对比，重新生成dom元素。

好了，到此为止，本地持久化拖动排序算是完成了，即使刷新页面也不怕，我们也可以把数组上报服务器，作为每个用户的特有排序。