Vue usa sortablejs para arrastar e soltar exibição de classificação inconsistente com os dados, solução para o problema de voltar atrás após a conclusão do arrasto

No projeto Vue, sortable é usado para classificar elementos de bloco arrastando e soltando. sortable.jsÉ um plug-in de arrastar e soltar muito útil. Recentemente, tentei usá-lo para criar uma função de arrastar e soltar de cartão de lista. No entanto, é uma biblioteca de classes que opera diretamente o DOM.Se houver outras bibliotecas de classes orientadas a dados, é recomendável não dar prioridade.

1. Instalação

npm install sortablejs --save

2. Introdução:

import Sortable from ‘sortablejs’

3. Uso

<section class="section-module" v-for="(element, index) in moduleList" :key="index">
... ...
</section>

<script>
import Sortable from 'sortablejs'

export default {
  mounted(){
    let that = this;
    new Sortable(document.getElementById('module'), {
      animation: 1000,
      ghostClass: 'sortable-ghost',
      onEnd: function (evt) {
        
        // 拖拽排序数据
        that.moduleList.splice(evt.newIndex, 0, that.moduleList.splice(evt.oldIndex, 1)[0])
        const newArray = that.moduleList.slice(0)
        
        // 重新赋值来刷新视图 （这里我调的父组件的变量，你的可以换成当前组件的变量）
        that.$parent.moduleList = [] // 必须有此步骤，不然拖拽后回弹
        that.$nextTick(function () {
          that.$parent.moduleList = newArray // 重新赋值，用新数据来刷新视图 
          console.log(that.moduleList)
        })
      }
    });
  },
}
</script>

4. Problemas e soluções

Se você encontrar inconsistência de dados, como resolver o problema de voltar atrás após a conclusão do arrasto?

 A solução está escrita nos comentários do código acima. Talvez a sua situação seja diferente da minha. O mais importante é prestar atenção ao princípio de análise do problema.

Dê uma olhada nos problemas encontrados por outros blogueiros: https://blog.csdn.net/u012169390/article/details/101280523

 Talvez possa lhe dar alguma inspiração.

5. Resumo

sortablejs é baseado na operação do DOM e no driver de dados do Vue. Ao operar diretamente o DOM, várias inconsistências de exibição ocorrerão. Você pode usar that.$parent.moduleList = [] ou os métodos relacionados do Vue para atualizar novamente e resolver o problema. O problema.