修改vue3代码实现div可以拖拽？
大佬帮忙修改一下面的代码，鼠标可以分别拖拽div，并且不超过窗口的边界。
https://play.vuejs.org/#eNqlVW1r2zAQ/is3U4gDmdPto5eWbnSMwcZg7...
共有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);-
本文向大家介绍js实现鼠标拖拽缩放div实例代码，包括了js实现鼠标拖拽缩放div实例代码的使用技巧和注意事项，需要的朋友参考一下 封装为了jq插件，如下 drag.js html文件 以上所述是小编给大家介绍的js实现鼠标拖拽缩放div详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！
-
本文向大家介绍jQuery实现div随意拖动的实例代码(通用代码)，包括了jQuery实现div随意拖动的实例代码(通用代码)的使用技巧和注意事项，需要的朋友参考一下 注意js放的位置，要放的靠近，若被其他覆盖，则无法移动。 比如： 引入jquery.js, jquery-ui.js, 一句： 如希望，点住时鼠标变手形： 下面给大家分享一段通用代码jquery实现拖动div的通用方法
-
本文向大家介绍完美的js div拖拽实例代码，包括了完美的js div拖拽实例代码的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了完美的js div拖拽实例代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍JavaScript拖动层Div代码，包括了JavaScript拖动层Div代码的使用技巧和注意事项，需要的朋友参考一下 效果图：（灰色区域可拖动） 代码如下： 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！
-
我怎么在move的时候让对应的样式也修改，也就是elRed.style或elGreen.style，现在不起作用。 可以跳转到这里直接看效果： https://play.vuejs.org/#eNqlVW1r2zAQ/is3U4gDmdPto5eWbnSMwcZg7...
-
本文向大家介绍jQuery实现可拖动进度条实例代码，包括了jQuery实现可拖动进度条实例代码的使用技巧和注意事项，需要的朋友参考一下 html css js 效果图 实现原理 首先是用mousedown()鼠标按下事件保存一个状态值，mouseup()鼠标抬起事件取消该状态，再同时配合mousemove()鼠标移动事件，实现按住拖动的效果。 在鼠标移动的同时去改变精度条的长度和按钮的相对左