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

作者站长头像
站长
· 阅读数 19

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

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

回复
1个回答
avatar
test
2024-07-02

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

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

x.value = Math.min(event.clientX, window.innerWidth);
y.value = Math.min(event.clientY, window.innerHeight);
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容