Usando a biblioteca de arrastar e soltar sortablejs em vue2 vuex

1. Há um problema

Haverá bugs no uso da biblioteca de arrastar e soltar sortablejs diretamente no vue2 vuex

Como o sortablejs modificará automaticamente o html dom e, depois que o usuário modificar os dados em onUpdate, o vue será renderizado novamente.

Modificar o dom duas vezes fará com que a ordem do dom fique confusa (encontrei este problema)

2. Use vuedraggable para resolver

Problema: não pode ser usado em loops aninhados

npm i -S instalação vuedraggável

Copiar Sortable.mini.js vuedraggable.umd.min.js precisa ser introduzido após vue vuex

<script type="text/javascript" src="/js/vue.js"></script>
<script type="text/javascript" src="/js/vuex.min.js"></script>
<script type="text/javascript" src="/js/Sortable.min.js"></script>
<script type="text/javascript" src="/js/vuedraggable.umd.min.js"></script>

(Você também pode fazer uma cópia e importar diretamente)

import vuedraggable from vuedraggable

Vue.component('vuedraggable', vuedraggable )

Usar (este é um exemplo de vuex)

<draggable
        v-model="myList"
        handle=".handle"
        @change="log"
      >
      <div v-for="element in myList" :key="element.id">{
   
   {element.name}}</div>
</draggable>


computed: {
    myList: {
        get() {
            return this.$store.state.myList
        },
        set(value) {
            this.$store.commit('updateList', value)
        }
    }
}

3. Faça você mesmo um componente para agrupar sortablejs vuexdroggable.vue

Aqui eu introduzi manualmente Sortable.min.js em index.html para que nenhuma importação seja necessária

<template>
  <div style="display: none"></div>
</template>

<script>
export default {
  name: 'vuexdroggable',
  props: ['length', 'id', 'index', 'draggable'],
  methods: {
    removeNode (node) {
      if (node.parentElement !== null) {
        node.parentElement.removeChild(node)
      }
    },
    insertNodeAt (fatherNode, node, position) {
      const refNode =
        position === 0
          ? fatherNode.children[0]
          : fatherNode.children[position - 1].nextSibling
      fatherNode.insertBefore(node, refNode)
    },
    onDragUpdate (evt) {
      this.removeNode(evt.item)
      this.insertNodeAt(evt.from, evt.item, evt.oldIndex)
      //自定义事件 onUpdate
      this.$emit('onUpdate', this.index, evt.oldIndex, evt.newIndex)
    },
  },
  mounted () {
    var that = this
    this._sortable = new Sortable(document.getElementById(this.id), {
      animation: 150,
      draggable: this.draggable,
      onUpdate: function (evt) {
        that.onDragUpdate(evt)
      }
    })
  },
  beforeDestroy: function beforeDestroy () {
    if (this._sortable !== undefined) this._sortable.destroy()
  },
}
</script>

<style scoped>

</style>

<div id="icons_kindex">
      <div class="iconsItem" v-for="(item,index) in icons_kindex"></div>
</div>
<vuexdroggable :length="icons_kindex.length" @onUpdate="update" id="icons_kindex" index="kindex" draggable=".iconsItem" ></vuexdroggable>




methods: {
    update(index, oldIndex, newIndex){
        console.log(index, oldIndex, newIndex)
        //this.$store.commit('updateList')
    },
}
//vuexdroggable 本身没有任何显示效果 只是为了调用 sortablejs ,需要写到 <div id="icons_kindex">的后面(保证这个div已经渲染完成)
//length 数组长度(可移动对象的长度)
//id document.getElementById(this.id) 包裹可移动div 的id
//index 回调的传递给回调函数 可以根据需要传递任意值
//draggable 可拖拽的div

Observe que a chave do código é que Sortablejs está proibido de modificar o dom em onUpdate.

O código-chave é copiado de vuedraggable

Ele implementa apenas as partes principais, você pode modificá-lo de acordo com suas próprias necessidades