工作日志：ruoyi-vue-plus实现拖拽添加移除等功能

先上图。

废话不多说，直接上代码。
首先是html模块代码。

<el-dialog v-model="isShow" title="编辑快捷功能" width="70%" append-to-body>
    <div class="model-title">
      <span>已展示功能</span>
      <span>鼠标按住拖动icon，可调整顺序</span>
    </div>
    //已展示模块区域
    <div class="divCol">
      <div class="model">
        <div
          v-for="(item, index) in models"
          :key="index"
          :span="4"
          class="draggable-item flexClum"
          draggable="true"
          @dragstart="dragStart(index)"
          @dragover="allowDrop"
          @drop="drop(index)"
        >
          <div class="flexClum">
            <span class="iconR minus-delete" @click="delModel(index)">&mdash;</span>
            <img :src="item.imgurl" />
            <span>{{ item.title }}</span>
          </div>
        </div>
        <div v-show="models.length < 6" id="dropAdd" class="flexClum add-model" @dragover="allowDropHide" @drop="dropHide">
          <el-icon class="plusBtn"><Plus /></el-icon>
          <span>拖动到此位置</span>
        </div>
      </div>
      <!-- 未展示区域 -->
      <div class="model-title mt20">
        <span>未展示功能</span>
        <span>点击+号可快速添加</span>
      </div>
      <div class="divCol">
        <div class="model">
          <div
            v-for="(item, index) in hideModels"
            :key="index"
            :span="4"
            class="draggable-item flexClum"
            draggable="true"
            @dragstart="dragStartHide(index)"
          >
            <div class="flexClum">
              <span class="iconR minus-add" @click="addModel(index)">&plus;</span>
              <img :src="item.imgurl" />
              <span>{{ item.title }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="footerBtn">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </div>
  </el-dialog>

接下来是逻辑代码部分。

//定义已展出模块数据
let models = reactive([
  { imgurl: new URL('@/assets/images/model1.png', import.meta.url).href, title: '标题' },
  { imgurl: new URL('@/assets/images/model2.png', import.meta.url).href, title: '标题' },
  { imgurl: new URL('@/assets/images/model3.png', import.meta.url).href, title: '标题' },
  { imgurl: new URL('@/assets/images/model4.png', import.meta.url).href, title: '标题' },
  { imgurl: new URL('@/assets/images/model5.png', import.meta.url).href, title: '标题' },
  { imgurl: new URL('@/assets/images/model6.png', import.meta.url).href, title: '标题' }
]);

//定义未展出模块数据
let hideModels = reactive([
  { imgurl: new URL('@/assets/images/model1.png', import.meta.url).href, title: '标题' },
  { imgurl: new URL('@/assets/images/model2.png', import.meta.url).href, title: '标题' },
  { imgurl: new URL('@/assets/images/model3.png', import.meta.url).href, title: '标题' }
]);

// 删除已展出模块
const delModel = (index: number) => {
  hideModels.push(models[index]);
  models.splice(index, 1);
};

// 点击每个模块右上方的添加按钮（单个添加）
const addModel = (index: number) => {
  models.length < 6
    ? models.push(hideModels[index]) && hideModels.splice(index, 1)
    : ElMessage({
        message: '最多展示六个功能。',
        type: 'warning'
      });
};

// 已展出中被拖拽元素的索引
const draggingIndex = ref(-1); 

const dragStart = (index) => {
  draggingIndex.value = index;
};

const allowDrop = (e) => {
  e.preventDefault();
};

const drop = (index) => {
  dragIndex.value = -1;
  if (draggingIndex.value < 0) return;
  const draggedItem = models.splice(draggingIndex.value, 1)[0];
  models.splice(index, 0, draggedItem);
  draggingIndex.value = -1;
};

// 未展出中被拖拽元素的索引
const dragIndex = ref(-1); 

const dragStartHide = (index) => {
  dragIndex.value = index;
};

const allowDropHide = (e) => {
  e.preventDefault();
};

const dropHide = () => {
  draggingIndex.value = -1;
  if (dragIndex.value < 0) return;
  const draggedItem = hideModels.splice(dragIndex.value, 1)[0];
  models.push(draggedItem);
  dragIndex.value = -1;
};