修改vue3代码实现div可以拖拽？

Question

大佬帮忙修改一下面的代码，鼠标可以分别拖拽div，并且不超过窗口的边界。

https://play.vuejs.org/#eNqlVW1r2zAQ/is3U4gDmdPto5eWbnSMwcZg7...

Answer 1

你是const elRed = useDraggable();直接在项目中使用的elRed，所以需要转换一下，另外你的style不是响应式的，需要在move中进行实时修改重新赋值

不超过边界需要判断当前元素的位置，最简单的方式就是直接判断，但应该考虑元素的宽高等，这可以通过window.getComputedStyle(event.target)获取元素的属性

x.value = Math.min(event.clientX, window.innerWidth);
y.value = Math.min(event.clientY, window.innerHeight);