<template >
          <Draggable
            v-model="item2.area_list"
            :disabled="isDisabled"
            @change="
              (event) => {
                onChange(item2.area_list, event);
              }
            "
          >
            <el-checkbox
              v-for="(item3, index3) in item2.area_list"
              :key="index3"
              v-model="item3.display"
              true-label="Y"
              false-label="N"
              :disabled="isDisabled"
            >
              {{ item3.title }}
            </el-checkbox>
          </Draggable>
          <span v-if="!isDisabled" class="draggable-text">拖拽调整顺序</span>
        </template>

vue 的 Draggable 组件实现 拖拽调整顺序


代码不能运行,但是逻辑是可以使用的


注意安装组件和引入组件

import Draggable from "vuedraggable";