Vue + element ui table 實(shí)現(xiàn)拖拽

源代碼

地址：https://registry.npmjs.org/sortablejs/-/sortablejs-1.13.0.tgz

使用

1、引入

import Sortable from 'sortablejs';

2、創(chuàng)建

   imageSort(){
      const _node = this.$el.querySelector('.el-upload-list .el-upload-list--picture-card');
      const _this = this;
      _this.sort = Sortable.create(_node, {
        handle: '.drag',
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.form.screenShotCovers.splice(oldIndex, 1)[0];
          _this.form.screenShotCovers.splice(newIndex, 0, currRow);
        }
      });
    },

3、調(diào)用

this.$nextTick(() => {
            that.imageSort();
          });

4、注銷

sortDestroy() {
      if (this.sort) {
        this.sort.destroy();
        this.sort = null;
      }
    },

5、html注入

<ul class=".el-upload-list .el-upload-list--picture-card">
  <li class="drag">
  ...
</ul>