修改vue3代码实现div可以拖拽?
大佬帮忙修改一下面的代码,鼠标可以分别拖拽div,并且不超过窗口的边界。
https://play.vuejs.org/#eNqlVW1r2zAQ/is3U4gDmdPto5eWbnSMwcZg7...
回复
1个回答

test
2024-07-02
你是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);
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容