vue3中动态修改div的style?

Question

我怎么在move的时候让对应的样式也修改，也就是elRed.style或elGreen.style，现在不起作用。
可以跳转到这里直接看效果：
https://play.vuejs.org/#eNqlVW1r2zAQ/is3U4gDmdPto5eWbnSMwcZg7...

<template>
  <div
      :style="[elRed.style, { background: 'red' }]"
      @mousedown="startDrag(elRed, $event)"
      :class="{ dragging: elRed.isDragging }"
  >
    Drag me! I am at {{ elRed.x }}, {{ elRed.y }}
  </div><br/>
  <div
      :style="[elGreen.style, { background: 'green' }]"
      @mousedown="startDrag(elGreen, $event)"
      :class="{ dragging: elGreen.isDragging }"
  >
    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 style=ref({
    position: 'fixed',
    transform: 'translate(10px, 10px)',
  })
  const isDragging = ref(false);

  const start = (event) => {
    isDragging.value = true;
  };

  const move = (event) => {
    if (isDragging.value) {
      x.value = event.clientX;
      y.value = event.clientY;
      style.value = {
        position: 'fixed',
        transform: `translate(${x.value}px, ${y.value}px)`,
      };

    }
  };
  const handelStyle=()=>{
    return {
      position: 'fixed',
      transform: `translate(${x.value}px, ${y.value}px)`,
    }
  }
  const end = () => {
    isDragging.value = false;
  };

  return {
    x,
    y,
    style: {
      position: 'fixed',
      transform: `translate(${x.value}px, ${y.value}px)`,
    },
    handelStyle,
    isDragging,
    start,
    move,
    end,
  };
}

const elRed = useDraggable();
const elGreen = useDraggable();

const startDrag = (dragObj, event) => {
  event.preventDefault();
  dragObj.start(event);
  document.addEventListener('mousemove', dragObj.move);
  document.addEventListener('mouseup', stopDrag);
};

const stopDrag = (event) => {
  elRed.end();
  elGreen.end();
  document.removeEventListener('mousemove', elRed.move);
  document.removeEventListener('mousemove', elGreen.move);
};

</script>

<style>
.dragging {
  cursor: move;
}
</style>

Answer 1

import {ref,reactive} from 'vue';
const elRed = reactive(useDraggable());
const elGreen = reactive(useDraggable());

然后你style return出去的时候，应该是用那个有ref的部分，而不是静态的对象