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