vue3实现手机上可拖拽元素的组件

用vue3实现一个可在手机上拖拽元素的组件，可拖拽至恣意位置，而且可以避免拖拽元素移出屏幕边际。

<script setup>
import { ref } from "vue";
const props = defineProps({
  disabled: { type: Boolean, default: false }
});
const dragPos = {
  hasMoved: false, // 扫除click事情
  x: 0, // right
  y: 0, // bottom
  startX: 0,
  startY: 0,
  endX: 0,
  endY: 0
};
const dragBoxPos = ref({ x: null, y: null });
const dragBoxRef = ref();
const setPosition = (dragX, dragY) => {
  [dragX, dragY] = _getSafeAreaXY(dragX, dragY);
  dragPos.x = dragX;
  dragPos.y = dragY;
  dragBoxPos.value.x = dragX;
  dragBoxPos.value.y = dragY;
};
const _getSafeAreaXY = (x, y) => {
  const docWidth = Math.max(
    document.documentElement.offsetWidth,
    window.innerWidth
  );
  const docHeight = Math.max(
    document.documentElement.offsetHeight,
    window.innerHeight
  );
  // 查看屏幕边际
  if (x + dragBoxRef.value.offsetWidth > docWidth) {
    x = docWidth - dragBoxRef.value.offsetWidth;
  }
  if (y + dragBoxRef.value.offsetHeight > docHeight) {
    y = docHeight - dragBoxRef.value.offsetHeight;
  }
  if (x < 0) {
    x = 0;
  }
  // iOS底部的安全区域
  if (y < 20) {
    y = 20;
  }
  return [x, y];
};
const onTouchStart = (e) => {
  if (props.disabled) return;
  dragPos.startX = e.touches[0].pageX;
  dragPos.startY = e.touches[0].pageY;
  dragPos.hasMoved = false;
};
const onTouchEnd = (e) => {
  if (props.disabled) return;
  if (!dragPos.hasMoved) return;
  dragPos.startX = 0;
  dragPos.startY = 0;
  dragPos.hasMoved = false;
  setPosition(dragPos.endX, dragPos.endY);
};
const onTouchMove = (e) => {
  if (props.disabled) return;
  if (e.touches.length <= 0) return;
  const offsetX = e.touches[0].pageX - dragPos.startX,
    offsetY = e.touches[0].pageY - dragPos.startY;
  let x = Math.floor(dragPos.x - offsetX),
    y = Math.floor(dragPos.y - offsetY);
  [x, y] = _getSafeAreaXY(x, y);
  dragBoxPos.value.x = x;
  dragBoxPos.value.y = y;
  dragPos.endX = x;
  dragPos.endY = y;
  dragPos.hasMoved = true;
  e.preventDefault();
};
</script>
<template>
  <div
    ref="dragBoxRef"
    class="tvb-drag-box"
    :class="{ disabled: disabled }"
    :style="
      disabled ? '' : `right: ${dragBoxPos.x}px; bottom: ${dragBoxPos.y}px;`
    "
    @touchstart="onTouchStart"
    @touchend="onTouchEnd"
    @touchmove="onTouchMove"
  >
    <slot></slot>
  </div>
</template>
<style lang="scss" scoped>
.tvb-drag-box {
  &:not(.disabled) {
    position: fixed;
    bottom: 10px;
    right: 10px;
    overflow: hidden;
    z-index: 99;
  }
}
</style>

运用方法

<drag-box>
    <button>我是内容</button>
</drag-box>