vue3中怎么实现多个div通过定义一个函数useDraggable实现拖动？

Question

https://play.vuejs.org/#eNqlVE2PmzAQ/StTLkskStIes9nVtmpV9dBL1...

上面地址中的代码需要修改成：
1：鼠标在红或绿色div上按下后移动鼠标，则相应的div会随着鼠标移动。
2：不管是红还是绿色div鼠标按下移动时不能超出窗口的边界。

有人知道怎么修改不？对鼠标那块的知识不怎么熟，学了忘。

Answer 1

<template>  <div     :style="{ left: `${elRed.x}px`, top: `${elRed.y}px`, position: 'fixed', background: 'red' }"     @mousedown="elRed.start"     @mousemove="elRed.move"     @mouseup="elRed.end"    @mouseleave="elRed.end"  >    Drag me! I am at {{ elRed.x }}, {{ elRed.y }}  </div>  <br/>  <div     :style="{ left: `${elGreen.x}px`, top: `${elGreen.y}px`, position: 'fixed', background: 'green' }"     @mousedown="elGreen.start"     @mousemove="elGreen.move"     @mouseup="elGreen.end"    @mouseleave="elGreen.end"  >    Drag me! I am at {{ elGreen.x }}, {{ elGreen.y }}  </div></template><script setup lang="ts">import { ref } from 'vue';function useDraggable() {  const x = ref(0);  const y = ref(0);  const isDragging = ref(false);  let startX = 0;  let startY = 0;  let initialX = 0;  let initialY = 0;  const start = (event) => {    isDragging.value = true;    startX = event.clientX;    startY = event.clientY;    initialX = x.value;    initialY = y.value;  };  const move = (event) => {    if (isDragging.value) {      const dx = event.clientX - startX;      const dy = event.clientY - startY;      x.value = Math.min(Math.max(initialX + dx, 0), window.innerWidth - 100); // 100 is the width of the div      y.value = Math.min(Math.max(initialY + dy, 0), window.innerHeight - 100); // 100 is the height of the div    }  };  const end = () => {    isDragging.value = false;  };  return {    x,    y,    isDragging,    start,    move,    end  };}const elRed = useDraggable();const elGreen = useDraggable();</script>