vue列表实现拖拽排序

大致效果如下：

 具体步骤：

安装：

npm install vuedraggable -S

在package.json中安装vuedraggable组件

  "vuedraggable": "^2.24.3"

HTML代码

<!-- 拖拽 开始 -->
      <div class="drag-wrap">
        <draggable v-model="dragList" animation="300" @end="dragEnd">
          <div v-for="item in dragList" :key="item.id" class="drag-item">
            <i class="icon-indicator"></i>
            <span class="drag-content">{{ item.field }}</span>
            <i class="icon-cancel del-icon"></i>
          </div>
        </draggable>
      </div>
       <!-- 拖拽 结束 -->

JS代码：

import draggable from 'vuedraggable'; // 引入组件
export default {
  components: {
    draggable,
  },
  data() {
    return {
	  dragList: [
        { field: '工号', code: 'job_number'},
        { field: '姓名', code: 'empl_name'},
        { field: '岗位', code: 'job_title'},
        { field: '部门', code: 'dept_title'},
      ]
	}
 }
methods: {
    dragEnd() {
      // TODO拖拽完成后回调
      console.log('this.dragList=', this.dragList);
    },
}
}

CSS参考样式：

.drag-wrap {
  width: 500px;
  margin: 100px;

  .drag-item {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 8px;
    padding: 8px;
    cursor: pointer;

    &:last-child {
      margin-bottom: 0;
    }

    .drag-content {
      flex: 1;
      margin-left: 8px;
      color: #2b2e3b;
    }

    &:hover {
      background: rgba(83, 109, 162, 0.05);
      border-radius: 6px;
      transition-duration: 0.5s;
    }
  }
}

总结：

vuedraggable是基于Sortable.js的vue组件，我们也可以使用Sortable.js原生API实现该功能。