vue3拖拉拽组件面板实现（一）

一、属性介绍

HTML元素draggable="true"属性，规定元素是可拖动的。
onmousedown鼠标按下事件。
@dragover拖动结束 @drop拖动过程。事件处理元素落下。
e.preventDefault阻止默认行为。
transform: translate(${item.x}px, ${item.y}px)计算鼠标点击小组件的位置。
父元素使用position: relative;绝对定位，子元素position: absolute;相对定位，使元素可以叠放。

二、实现代码

<template>
  <div id="app">
    <!-- 组件列表 -->
    <div class="widget-list">
      <div
        v-for="widget in widgetList"
        :key="widget.type"
        class="widget"
        draggable="true"
        :onmousedown="(e:any) => onWidgetMouseDown(e, widget)"
      >
        {{ widget.lable }}
      </div>
    </div>
    <div class="pannel" @dragover="(e:any) => e.preventDefault()" @drop="onDrop">
      <div
        v-for="item in list"
        :key="item.id"
        class="box"
        :style="`transform: translate(${item.x}px, ${item.y}px)`"
      >
        我是{{ item.lable }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const list: any = ref([]);
const widgetList: any = ref([
  {
    type: "pie",
    lable: "饼图",
  },
  {
    type: "line",
    lable: "折线图",
  },
  {
    type: "bar",
    lable: "柱状图",
  },
]);
// 当前id
let currentId = 0;
// 组件的x和y
let widgetX = 0;
let widgetY = 0;
// 当前拖动的组件
let currentWidget: any = null;

// 放置
const onDrop = (e: any) => {
  // e.offsetX e.offsetY 放置组件的位置

  list.value.push({
    id: currentId++,
    x: e.offsetX - widgetX,
    y: e.offsetY - widgetY,
    lable: currentWidget.lable,
  });
};

// 在小组件鼠标落下的时候
const onWidgetMouseDown = (e: any, widget: any) => {
  console.log(widget);
  // e.offsetX e.offsetX 鼠标落下的位置
  widgetX = e.offsetX;
  widgetY = e.offsetY;
  // 当前拖动的组件 赋给push落下
  currentWidget = widget;
};
</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
}
#app {
  width: 100vw;
  height: 100vh;
  display: flex;
}
.widget-list {
  width: 300px;
  background-color: #dfdfdf;
}
.pannel {
  flex: 1;
  background-color: #efefef;
  position: relative;
}
.widget {
  width: 100px;
  height: 100px;
  outline: 1px solid red;
  font-size: 20px;
  text-align: center;
  line-height: 100px;
  margin: 20px;
}
.box {
  width: 300px;
  height: 200px;
  outline: 1px solid blue;
  position: absolute;
}
</style>