sortable.js 的使用

参考博客：

• http://www.itxst.com/sortablejs/neuinffi.html

代码注释:（element下测试结果）

 const tbody = document.querySelector('.el-table__body-wrapper tbody');
      // const tbody = document.getElementById('sortable');
      const _this = this;
      Sortable.create(tbody, {
        ghostClass: 'sghost', //影子
        chosenClass: 'sghost', //和下面的效果好像一样
        dragClass: 'sghost', //forceFallback: false 时不生效
        animation: 200, // 拖拽延时，效果更好看
        forceFallback: true, // 此项开启，下面的灵敏度才会生效，但是开始目前会遇到bug
        //拖到的块，不跟随鼠标，目前没有找到原因,原生情况下没有bug
        scrollSensitivity: 40, //边缘滚动灵敏度
        scrollSpeed: 40, // px
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currRow);
        }
      });
.sghost {
  opacity: 0.1 !important;
  background-color: #2080f7 !important;
}

心得

修改参数，查看效果。很多效果可能不行，浪费了很多时间。
因为不知道实现的原理，需要用排除法进行排除。

TODO

• sortable的源码学习
• el-table实现虚拟滚动的学习