基于 SortableJS实现表格拖拽

这里需要用到 JavaScript 拖拽库  SortableJS  官网地址： http://www.sortablejs.com/

首先 npm install sortablejs 

组件内部引入 import Sortable from 'sortablejs';

实例化拖拽函数

  const initSort = () => {

      const el = document.querySelector(`#mytb${props.index} tbody`) as HTMLElement;

      if (el) {

        new Sortable(el, {

          handle: '.sort',

          animation: 150,

          ghostClass: 'blue-background-class',

          sort: true,

          onEnd: ({ newIndex, oldIndex }) => {

            // 获取拖拽前后的索引，然后更新表格数据  

          我发现这个函数的索引是从1 开始的 

            const currentRow = formState.framePriority.splice(oldIndex-1, 1)[0];

            formState.framePriority.splice(newIndex-1, 0, currentRow);

            emit('commit', formState);

          },

        });

      }

    };              

组件挂载完成 执行拖拽函数即可

onMounted (()=>{

         nextTick(() => {

               initSort()

            });

})