vue项目使用elementUI插件，checkbox实现拖动调整顺序

1、需求

复选框，可以拖拽，自定义排序

2、代码

安装插件依赖

npm install vuedraggable

<template>
  <div>
    <draggable v-model="list" @start="drag=true" @end="drag=false">
      <div v-for="item in list" :key="item.id">
        <el-checkbox v-model="item.checked">{{ item.name }}</el-checkbox>
      </div>
    </draggable>
  </div>
</template>
 
<script>
import draggable from 'vuedraggable';
 
export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [
        { id: 1, name: '选项A', checked: false },
        { id: 2, name: '选项B', checked: false },
        { id: 3, name: '选项C', checked: false },
        // ...更多选项
      ],
      drag: false
    };
  }
};
</script>

3、效果图