Vue：制作一个通用的拖拽组件

废话不多说，直接上代码

FloatContainer.vue

<script setup>
import { onMounted, onUnmounted } from "vue";

const dragId = `drag-div-${new Date().getTime()}`;
let dragDiv;

onMounted(() => {
  dragDiv = document.getElementById(dragId);
  dragDiv.addEventListener("mousedown", mouseDown, false);
});

onUnmounted(() => {
  dragDiv?.removeEventListener("mousedown", mouseDown, false);
});

const mouseDown = event => {
  if (!dragDiv) {
    return;
  }
  const ev = event || window.event;
  const disX = ev.clientX - dragDiv.offsetLeft;
  const disY = ev.clientY - dragDiv.offsetTop;
  document.onmousemove = moveEvent => {
    const moveEv = moveEvent || window.event;
    let left = moveEv.clientX - disX;
    let top = moveEv.clientY - disY;
    //判断边界，以父布局为框
    if (left < 0) {
      left = 0;
    }
    if (top < 0) {
      top = 0;
    }
    if (left > dragDiv.parentElement.offsetWidth - dragDiv.offsetWidth) {
      left = dragDiv.parentElement.offsetWidth - dragDiv.offsetWidth;
    }
    if (top > dragDiv.parentElement.offsetHeight - dragDiv.offsetHeight) {
      top = dragDiv.parentElement.offsetHeight - dragDiv.offsetHeight;
    }
    dragDiv.style.left = `${left}px`;
    dragDiv.style.top = `${top}px`;
  };

  document.onmouseup = upEvent => {
    document.onmousemove = null;
    document.onmouseup = null;
  };
};
</script>
<template>
  <div :id="dragId">
    <slot></slot>
  </div>
</template>
<style scoped lang="less"></style>

这样在使用的时候直接使用即可：

import FloatContainer from “.../FloatContainer.vue”
...
<float-container>
    悬浮内容
</float-container>

使用起来非常简单