Vue实现了弹框的自由拖动(不超出可视范围，快速解决拖动问题)。 因为页面上有很多弹框，所以容易屏蔽想看的内容。 因此，必须自由移动拖动框。 但是，在使用过程中，您发现第一个创建的drag.js文件会移出可见范围，从而影响整个项目的布局；在拖动过程中，快速拖动弹框可能会禁用或稍微延迟
1 .在项目中创建新的drag.js文件。 文件内的代码如下。 (直接复制使用)下面的代码解决了从可见范围移动和快速拖动的延迟问题，并在拖动时设置相应的鼠标样式(import Vue from 'vue )； 使用Vue.directive ()定义全局指令//1 .参数1 )指令的名称。 定义时不需要在命令前写v-//2。 参数2 )是具有相关操作函数//3的对象。 调用时必须写v-const drag=vue.//1 .指令绑定到元素后立即执行绑定函数。 //2只运行一次。 每个函数的第一个参数始终是el，表示绑定指令的元素。 el参数是本机js对象//3。 在el.focus ()中，无法获得焦点，因为只有在插入DOM后才能启用bind 3360 functtion//鼠标样式成为move样式}， //inserted表示元素，插入到DOM中时执行inserted函数，仅触发一次inserted:function(El ) El.onmousedown=function ) ) console.log (元素本身的高度(el.clientHeight )，元素本身的宽度(el.clientWidth ) if ) { e.prevent default } { e.prevent default } )。 } else{ e.returnValue=false； (； //解决快速拖动延迟问题的document.onmousemove=function (//鼠标位置减去鼠标相对元素位置，元素位置let left=e.clientX - distX； let top=e.clientY - distY； if(left=0) { left=5； “//5”设置为“else if (左文档. documentelement.clientwidth-El.clientwidth )”/document.documentelement.clientwidth屏幕的可见宽度left=document.documentelement.clientwidth-El.clientwidth-5 } if () else if (top document.documentelement.clientheight-El.clientheight ) top=document.documentelement.clientheight El } document.onmouseup=function () document.onmousemove=document.onmouseup=null； }、更新VNode时执行updated，updated:function(El ) } )导出默认拖动； 在main.js中引入importdragfrom“…/src/API/drag.js”在需要拖动的弹框中添加v-drag命令
实现效果(实现拖动)快速拖动效果
参考博文： https://blog.csdn.net/hong 521520/article/details/106804209
3359 blog.csdn.net/a _ tzluy/article/details/111030896
33559 www.jb51.net/article/146240.htm