vuedraggable和Sortable.js拖拽插件的坑

 一，vuedraggable

vuedraggable拖拽后导致dom元素消失，原因：拖拽后添加了.sortable-drag类名，可覆盖此类名的样式

.sortable-drag{
  display: block !important;
  opacity: 1 !important;
}

 

 二，Sortable

1，Sortable不会改变原数据，但是可以得到改变前的索引和改变后的索引；可以通过dom元素获取排列顺序，进而对数据进行排序
 

//拿到每行排序后的key值然后对原数组进行排序
    const tbody = document.querySelector('.base_Table tbody') as HTMLElement
    const ids= []
    tbody.rows.forEach((element,index) => {
    //  console.log(element.__vnode.key)
     ids.push(element.__vnode.key) 
  });

2，刷新页面由于vue组件的层层调用，导致Sortable挂载多次，导致拖拽失效。可以在vueStore设置防抖标志，进行函数防抖。

 

//导入函数节流标志
import {isRun} from '~/stores/global'
let isRun_ = computed(() => isRun().isRun);

 if (!isRun_.value) {
    return
  }
  isRun().setIsRun(false)
  console.log(isRun_.value)
  setTimeout(()=>{
    Sortable.create(tbody, {
        animation: 150,
        forceFallback: true,
        filter: '.el-table__row--level-0',
        ghostClass: 'blue-background-class',
        // handle: ".el-icon", 
        onEnd: (event) => {
          if (event.newIndex !== event.oldIndex) {
            emit('drop', event, expandKeys.value)
          }
        },
      })
  isRun().setIsRun(true)
  },1000)

 

//表格Sortable设置拖拽节流标志
export const isRun = defineStore('isRun', {
  state: (): {
    isRun: boolean,
  }=>({
    isRun: true
  }),
  getters: {
  },
  actions: {
    setIsRun(isRun: any){
     this.isRun=isRun
    },
    updateIsRun(data: any) {

    }
  }
})