【sortablejs】拖拽排序

Vue + element ui table 实现拖拽

源代码

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

使用

1、引入

import Sortable from 'sortablejs';

2、创建

   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、调用

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

4、注销

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

5、html注入

  • ...

你可能感兴趣的:(【sortablejs】拖拽排序)