sortablejs + vue的拖拽效果 列表个数不固定 刷新后保持拖拽后的效果

 

<template>
  <div class="hello">

    <div v-for="(list, index) in merge" :key="index" class="box" :id="`box-${index}`">
      <h1>{{list.tittle}}</h1>
      <ul :id="`id-${index}`" v-for="(item, indexItem) in list.list" :key="indexItem">
        <li>{{item.name}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import Sortable from 'sortablejs';
  export default {
    name: 'HelloWorld',
    data() {
      return {
        //state 里面的name分别对应的是列表里面的标题
        //state里面的1 2 3和list里面的 1 2 3 的关系是：类别归属关系
        // 标题1 下面列表对应的分别是 列表1，列表2，列表3
        state: {
          1: "标题1",
          2: "标题2",
          3: "标题3",
          4: "标题4",
          5: "标题5"
        },
        list: {
          1: [{
              id: 1,
              name: "1、列表1"
            },
            {
              id: 2,
              name: "2、列表2"
            },
            {
              id: 3,
              name: "3、列表3"
            },
          ],
          2: [{
              id: 4,
              name: "4、列表4"
            },
            {
              id: 5,
              name: "5、列表5"
            },
            {
              id: 6,
              name: "6、列表6"
            },
          ],
          3: [{
            id: 7,
            name: '列表7'
          }]
        },
        merge: [] // 把state 和 list 合并在一个数组里面

      }
    },
    created() {
      // 看缓存有没有list数据 有就读取缓存 没有就合并获取的数据   逻辑顺序 1
      if (localStorage.getItem('MoveLocalStorageList')) {
        this.merge = JSON.parse(localStorage.getItem('MoveLocalStorageList'))
      } else {
        this.merge = this.dataMerge() // 合并数据
      }
    },
    methods: {
      /**
       * 处理数据 把标题和内容合并到一个数组里面  逻辑顺序 2
       */
      dataMerge() {
        let {
          state,
          list
        } = {
          ...this
        }
        let arr = []
        for (let i in state) {
          arr.push({
            tittle: state[i],
            list: list[i] || []
          })
        }
        return arr
      },
      /**
       * 通过id获取DOM
       */
      _$id(id) {
        return document.getElementById(id)
      },
      /**
       * 通过dom 获取数据数组 并存储到缓存  逻辑顺序 4
       */
      getDomData() {
        let doms = document.getElementsByClassName('hello')[0].children
        // console.log(doms)
        let merge = []
        for (let i = 0; i < doms.length; i++) {
          let tittle = ''
          let list = []
          let uls = doms[i].children
          for (let k = 0; k < uls.length; k++) {
            if (k == 0) {
              tittle = uls[k].innerHTML
              // console.log('tittle', tittle)
            } else {
              let name = uls[k].children[0].innerHTML
              // console.log('name', name)
              list.push({
                name: name
              })
            }
          }
          merge.push({
            tittle: tittle,
            list: list
          })
        }
        // console.log(merge)
        localStorage.setItem('MoveLocalStorageList', JSON.stringify(merge))
      },
      /**
       * 新建Sortable  逻辑顺序 3
       */
      createdSortable() {
        let _this = this
        for (let i = 0; i < this.merge.length; i++) {
          let item = this.merge[i].list
          let _id = `box-${i}`
          new Sortable(this._$id(_id), {
            group: 'shared', // set both lists to same group
            animation: 150,
            onEnd(evt) {
              // console.log(evt, evt.oldIndex, evt.newIndex)
              _this.getDomData()
            }
          })
        }
      }
    },
    mounted() {
      this.createdSortable()
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .hello {
    display: flex;
  }

  .hello .box {
    width: 30%;
    margin-left: 20px;
    border: 1px solid blue;
    padding: 10px;
  }

  .hello ul li {
    border: 1px solid red;
    padding: 20px;
    margin-top: 10px;
  }

</style>

 

 

video演示地址： 

https://cengjingdeshuige.oss-cn-beijing.aliyuncs.com/video/e127a65dac466466cc02a4b1642545a4.mp4

git仓库地址 demo

https://gitee.com/qichangshui_admin/sortablejs