npm i vuedraggable -S

<template>
  <div class="w-full h-full">
    <!-- 頁(yè)面拖拽組件 -->
    <div class="leftPart">
      <ElTree
        class="w100%"
        :data="$.treeData"
        ref="treeTableListRef"
        :props="$.defaultProps"
        highlight-current
        :expand-on-click-node="false"
        key="id"
        :default-expand-all="true"
        @node-click="(data, node) => $.tableFieldsNodeClick(data, node, treeTableListRef)"
      >
        <template #default="{ data }">
          <Draggable
            :list="[data]"
            ghost-class="ghost"
            chosen-class="chosenClass"
            animation="300"
            @start="onStart"
            @end="onEnd"
            group="group1"
            v-tooltip="`Tips：按住Ctrl或Shift進(jìn)行批量選擇`"
          >
            <template #item="{ element }">
              <div @dblclick="dbAddData(element)" style="user-select: none" class="item">
                {{ element.name }}
              </div>
            </template>
          </Draggable>
        </template>
      </ElTree>
    </div>
    <!-- 右側(cè)內(nèi)容 -->
    <div class="rightPart">
      <div class="flex">
        <div
          @mouseover="divMouseOver"
          @mouseleave="divMouselease"
          class="w-full rightContent"
          style="border: 1px solid #ccc"
        >
          <Draggable
            :list="state.list"
            ghost-class="ghost"
            group="group1"
            chosen-class="chosenClass"
            animation="300"
            @start="onStart"
            @end="onEnd"
            @add="addData"
            class="w-full dragArea"
          >
            <template #item="{ element }">
              <div class="item">
                {{ element.name }}
              </div>
            </template>
          </Draggable>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import Draggable from "vuedraggable";
import { useData } from "./hooks/drag";
const treeTableListRef = ref();
let { $data: $ } = useData();
const state = reactive<any>({
  //需要拖拽的數(shù)據(jù)，拖拽后數(shù)據(jù)的順序也會(huì)變化
  list: [],
});
//拖拽開(kāi)始的事件
const onStart = () => {
  console.log("開(kāi)始拖拽");
};
const divMouseOver = (e: any) => {};
const divMouselease = (e: any) => {};
//拖拽結(jié)束的事件
const onEnd = () => {
  console.log("結(jié)束拖拽");
};
// 雙擊添加
const dbAddData = (data: any) => {
  let i = state.list.findIndex((a: any) => a.id == data.id);
  if (data.children) return; //父級(jí)節(jié)點(diǎn)不添加
  if (i == -1) state.list.push(data);
};
// 批量添加
const addData = () => {
  // 拿到所有nodes節(jié)點(diǎn)數(shù)組
  const nodes = treeTableListRef.value.store._getAllNodes();
  nodes.map((a: any) => {
    if ($.selectNodes.includes(a.id)) {
      state.list.push(a.data);
    }
    // 排除父級(jí)，只添加子級(jí)
    state.list = state.list.filter((a: any) => !a.children);
    // 去重
    state.list = [...new Set(state.list)];
  });
};
onMounted(() => {});
onBeforeMount(() => {
  window.addEventListener("keydown", handleKeyDown);
  window.addEventListener("keyup", handleKeyUp);
});
// 按下為true
const handleKeyDown = (event: any) => {
  // 代表按下的是ctrl鍵
  if (event.key == "Control") {
    $.ctrlKeyPressed = true;
  }
  // 代表按下的是shift鍵
  if (event.key == "Shift") {
    $.shiftKeyPressed = true;
  }
};
// 釋放為false
const handleKeyUp = (event: any) => {
  // 代表按下的是ctrl鍵
  if (event.key == "Control") {
    $.ctrlKeyPressed = false;
  }
  // 代表按下的是shift鍵
  if (event.key == "Shift") {
    $.shiftKeyPressed = false;
  }
};
</script>
<style scoped lang="scss">
.leftPart {
  width: 20%;
  height: 100%;
  float: left;
  border-right: 1px dashed #ccc;
}
.rightPart {
  padding: 20px;
  width: 60%;
  height: 100%;
  float: left;
}
.list_drap {
  min-width: 120px;
  max-height: 86px;
  min-height: 22px;
  overflow-y: auto;
  height: auto;
}
.rightContent {
  border-radius: 4px;
  min-height: 30px;
  display: flex;
}
.dragArea {
  padding: 10px 5px;
  flex-grow: 1;
  .item {
    float: left;
    min-width: 50px;
    display: inline;
    margin: 0 3px 2px 3px;
    background-color: rgb(235, 241, 255);
    color: #3370ff;
    font-size: 12px;
    cursor: all-scroll;
    user-select: none;
    height: 20px;
    line-height: 20px;
    padding-left: 9px;
    padding-right: 9px;
    background: #ececfd;
    color: #333333;
    font-size: 12px;
  }
}
</style>

export function useData() {
  const $data: any = reactive({
    ctrlKeyPressed: false,
    shiftKeyPressed: false,
    shiftKeyFelid: [],
    defaultProps: {
      children: "children",
      label: "name",
    },
    treeData: [
      {
        name: "一級(jí)1",
        id: 1,
        children: [
          {
            name: "二級(jí)1",
            id: 2,
            children: [
              {
                name: "三級(jí)1",
                id: 2,
              },
              {
                name: "三級(jí)2",
                id: 4,
              },
              {
                name: "三級(jí)3",
                id: 5,
              },
              {
                name: "三級(jí)4",
                id: 6,
              },
              {
                name: "三級(jí)5",
                id: 7,
              },
            ],
          },
          {
            name: "二級(jí)2",
            id: 8,
          },
          {
            name: "二級(jí)3",
            id: 9,
          },
          {
            name: "二級(jí)4",
            id: 10,
          },
          {
            name: "二級(jí)5",
            id: 11,
          },
        ],
      },
      {
        name: "一級(jí)2",
        id: 12,
        children: [
          {
            name: "二級(jí)1",
            id: 13,
          },
          {
            name: "二級(jí)2",
            id: 14,
          },
          {
            name: "二級(jí)3",
            id: 15,
          },
          {
            name: "二級(jí)4",
            id: 16,
          },
          {
            name: "二級(jí)5",
            id: 17,
          },
        ],
      },
    ],
    selectNodes: [],
    treeTableListRef: null,
  });
  // 節(jié)點(diǎn)選中事件
  $data.tableFieldsNodeClick = (nodeData: any, node: any, treeTableListRef: any) => {
    const nodes = treeTableListRef.store._getAllNodes(); //所有node節(jié)點(diǎn)
    const ishas = $data.selectNodes.includes(node.id);
    // 遞歸遍歷節(jié)點(diǎn)數(shù)組進(jìn)行ID存放
    function addSelectId(arr: any) {
      for (const item of arr) {
        $data.selectNodes.push(item.id);
        if (Array.isArray(item.childNodes) && item.childNodes.length) {
          addSelectId(item.childNodes);
        }
      }
    }
    // 遞歸遍歷刪除節(jié)點(diǎn)id
    function delSelectId(arr: any) {
      for (const item of arr) {
        const index = $data.selectNodes.findIndex((x: any) => x == item.id);
        $data.selectNodes.splice(index, 1);
        if (Array.isArray(item.children) && item.children.length) {
          delSelectId(item.children);
        }
      }
    }
    // 按住了ctrl鍵，可以進(jìn)行單個(gè)多選
    if ($data.ctrlKeyPressed) {
      // 如果為true代表當(dāng)前選中的節(jié)點(diǎn)已存在
      if (ishas) {
        // 查找當(dāng)前選中的節(jié)點(diǎn)的索引
        const index = $data.selectNodes.findIndex((x: any) => x == node.id);
        // 刪除父節(jié)點(diǎn)
        $data.selectNodes.splice(index, 1);
        // 刪除子節(jié)點(diǎn)
        if (Array.isArray(node.childNodes) && node.childNodes.length) {
          delSelectId(node.childNodes);
        }
      } else {
        // 否則當(dāng)前選中的節(jié)點(diǎn)不存在，就加入到已選節(jié)點(diǎn)數(shù)組序列
        $data.selectNodes.push(node.id);
        // 防止選中的是父節(jié)點(diǎn)，就需要遞歸將子節(jié)點(diǎn)加入
        if (Array.isArray(node.childNodes) && node.childNodes.length) {
          addSelectId(node.childNodes);
        }
      }
      node.isCurrent = !node.isCurrent;
      // 按下了shift鍵，可以進(jìn)行范圍多選
    } else if ($data.shiftKeyPressed) {
      // 先清空
      $data.selectNodes = [];
      // 將當(dāng)前節(jié)點(diǎn)放入
      $data.selectNodes.push(node.id);
      $data.shiftKeyFelid.push(node.id);
      if ($data.shiftKeyFelid.length > 1) {
        // 首索引
        const sIndex = nodes.findIndex((x: any) => x.id == $data.shiftKeyFelid[0]);
        // 尾索引
        const eIndex = nodes.findIndex((x: any) => x.id == $data.shiftKeyFelid[$data.shiftKeyFelid.length - 1]);
        // 根據(jù)首尾索引，存入中間節(jié)點(diǎn)
        const s = sIndex < eIndex ? sIndex : eIndex; //取小值當(dāng)開(kāi)頭索引
        const e = sIndex < eIndex ? eIndex : sIndex; //取大值當(dāng)結(jié)尾索引
        for (let i = s; i < e; i++) {
          $data.selectNodes.push(nodes[i].id);
        }
      }
    } else {
      // 否則就是單機(jī)選擇
      $data.shiftKeyFelid = [];
      $data.selectNodes = [];
      $data.selectNodes = [node.id];
    }
    // 下面是對(duì)已選中的節(jié)點(diǎn)，進(jìn)行高亮展示
    // 通過(guò)控制elementui中節(jié)點(diǎn)上的isCurrent屬性
    // isCurrent為true是高亮，否則取消高亮
    for (const item of nodes) {
      if ($data.selectNodes.includes(item.id)) {
        item.isCurrent = true;
      } else {
        item.isCurrent = false;
      }
    }
  };
  return {
    $data: $data,
  };
}