vue实现内容拖拽，刷新页面后保持拖拽后的样式

插件文档：https://www.itxst.com/sortablejs/neuinffi.html

 

本来想直接存innerHTML的，但是发现点击事件会失效

 

npm安装方式

下载：npm install sortablejs --save

页面引入：import Sortable from 'sortablejs'

 

data() {
    return { 　
　　　　list: [
  　　　　{ 'id': 'defaultTypeTag1' },
  　　　　{ 'id': 'defaultTypeTag2' },
  　　　　{ 'id': 'defaultTypeTag3' },
  　　　　{ 'id': 'defaultTypeTag4' },
 　　　　 { 'id': 'defaultTypeTag5' },
 　　　　 { 'id': 'defaultTypeTag6' },
 　　　　 { 'id': 'defaultTypeTag7' },
　　　　  { 'id': 'defaultTypeTag8' },
 　　　　 { 'id': 'defaultTypeTag9' },
 　　　　 { 'id': 'defaultTypeTag10' },
  　　　　{ 'id': 'defaultTypeTag11' }
　　　　]
　　} 
} 

mounted() {

  // 初始化，从sessionStorage中取出已经排序后的数据
  const sortable = sessionStorage.getItem('sortable')
　// 判断是否有排序后的数据，如有，则根据存的数据进行页面排序
  if (sortable) {
    const sortableList = JSON.parse(sortable)
　　 this.list = sortableList
    sortableList.forEach((item, index) => {
      if (index + 1 === sortableList.length) return
      const dataId = item.id
      const nextId = sortableList[index + 1].id
      document.getElementById(dataId).after(document.getElementById(nextId))
    })
  }
  new Sortable(document.querySelector('.dragBox'), {
    animation: 200,
    onEnd: (evt) => {
      this.sortList(evt.to)
    }
  })
},

methods: {
  // 获取排序后的结果，并存入sessionStorage
  sortList(nDom) {
    const res = Array.from(nDom.childNodes).reduce((acc, v) => {
      return [...acc, this.list.find(c => c.id === v.getAttribute('data-id'))]
    }, [])
    sessionStorage.setItem('sortable', JSON.stringify(res))
  },

参考来自：https://jsrun.net/6evKp/edit?v=1