dialog.js jquery弹出自定义提示框

element-plus提供的el-dialog对话框功能非常强大，但是很遗憾不能通过拖动改变位置。那我该怎么办呢？我们可以实现一个el对话框，可以通过vue的自定义指令拖动。

拖拽演示

视频加载…

为什么vue3的自定义指令指令会选择自定义指令的方式来实现？一个是dom容易获取便于操作，另一个是方便使用和打包。

注册自定义指令有两种方式，一种是全局注册，一种是本地注册。

全局注册自定义指令

app . directive(& # 39；焦点& # 39；，{//当绑定元素入DOM时…mounted(el){//聚焦元素El。focus ()}})来自官网。以后做插件的时候需要。

局部注册自定义指令

指令:{ focus:{//instruction Mounted(El)的定义{el.focus ()}}这种方法可以用在开发和测试阶段，方便调试。插件每次修改都会重新加载，本地注册的只需要本地更新。

我们可以定义一个dialogdrag，然后在mounted中实现拖动功能。

分析 element-plus 的 Dialog 对话框

想要实现拖放功能，首先要了解对话框呈现的结构，然后才能有针对性的进行转换。
通过分析，我们可以看到以下结构:

简单来说，一个div有三个div，通过margin(上、左)达到“居中”的效果。
所以如果要实现拖动功能，可以改变边距左上的方式。

鼠标的三个函数

谈到拖放功能，三个鼠标事件onmousedown、onmousemove和onmouseup是必不可少的。

onmousedown
鼠标按下的时候记录光标的坐标，进入拖拽状态。onmouseup
鼠标抬起的时候记录光标的坐标，结束拖拽状态。onmousemove
按住鼠标拖动的时候触发，计算光标的偏移量，修改对话框的 margin 实现拖拽的效果。实现代码

本来想写一个通用的，但是对话框渲染的结构比较复杂，似乎不够通用，所以先实现了el-dialog的拖放功能。

app . directive(& # 39；对话框拖动& # 39；，{//mounted(el，Binding){//Binding . arg//Binding . value//可视窗口宽度const client Width = document.documentelement.clientwidth//可视窗口高度const clientheight = document。documentelement。client height//记录坐标let domset = {x: clientWidth/4，//默认宽度50% y:client height * 15/100//根据15vh计算}//弹出窗口的容器Const Domdrag = el.firstelementchild//Reset上下左右距离DOM drag。风格。margin top = DOM set . y+& # 39；px & # 39DOM drag . style . margin left = DOM set . x+& # 39；px & # 39//记录拖动开始时的光标坐标，其中0表示没有拖动let start = {x: 0，y: 0} //记录偏移量let move = {x: 0，y: 0} //按下鼠标开始拖动DOM drag . onmousedown =(e)= & gt；{//判断对话框是否重新打开，如果(DOM drag . style . margin top = = = & # 39；15vh & # 39){//重新打开并设置DOM set . y top DOM set . y = client height * 15/100 } start . x = e . clientx start . y = e . clientdom drag . style . cursor = & # 39；动& # 39；//改变光标形状}//鼠标移动，跟踪DOM drag . onmousemove =(e)= & gt；{if (start.x === 0) {//不处于拖动状态return } move . x = e . clientx-start . x move . y = e . clienty-start . y//初始位置+拖动距离DOM drag . style . margin left =(DOM set . x+move . x px & # 39；DOM drag . style . margin top =(DOM set . y+move . y)+& # 39；px & # 39}//抬起鼠标，结束拖动DOM drag . onmouseup =(e)= & gt；{ move . x = e . clientx-start . x move . y = e . clienty-start . y//记录新坐标作为下一次拖动的初始位置DOM set . x+= move . x DOM set . y+= move . y DOM drag . style . cursor = & # 39；'//恢复光标形状DOM drag . style . margin left = DOM set . x+& # 39；px & # 39DOM drag . style . margin top = DOM set . y+& # 39；px & # 39//End drawing start . x = 0 } } }重定位对话框
默认top为15vh，距离top 15%，需要转换成clientHeight * 15/100的像素。
默认左边是50%，所以需要转换成clientWidth/4的像素。这个修改有个小问题。当窗口大小改变时，左距离不会改变。

记录位置坐标和偏移量
首先要记录对话框的距离，然后要记录拖拽的时候产生的偏移量。domset 可以记录对话框的初始坐标。start 可以记录开始拖拽的时候光标的位置。move 记录拖拽过程中，光标移动的偏移量。按下鼠标 onmousedown
按下鼠标，表示开始拖拽，这时候需要我们记录光标的位置。
另外在测试的时候发现一个小问题，当关闭对话框的时候有一个过渡动画，然后在打开对话框进行拖拽的时候，就飞掉了。

找了一下原因，发现转场动画关闭的时候，陀螺会改成15vh，和我们拖的陀螺不一致。

所以你需要在按鼠标的时候做出判断。如果恢复初始状态，需要改变domset的y坐标。x坐标不需要改变，因为过渡动画没有改变左边。

移动鼠标 onmousemove
在移动鼠标的过程中，我们可以得到光标的位置，减去初始光标位置，就是对话框要移动的距离。
然后我们用对话框的 初始坐标 + 偏移量，就可以得到对话框的新的位置坐标。
这样就实现了对话框的拖拽。抬起鼠标 onmouseup
不能一直拖拽，所以我们需要一个结束动作。
当抬起鼠标的时候，我们可以认为是结束拖拽了，这时我们要记录对话框的新的位置坐标，
然后设置 start.x = 0 表示结束拖拽。做成插件便于复用

最后我们把这个拖拽功能做成插件，可以方便全局注册。

创建一个js文件

//dialog drag . jsconst dialog drag =(app，options)= & gt；{ app . directive(& # 39；对话框拖动& # 39；，{//指令装载的定义(el，binding){同上，省略…}导出默认对话框拖动并在main.js中安装这个插件

//拖动导入对话框从& # 39；。/control-web/js/dialog drag . js & # 39；创建应用程序(app)的拖放用法。use (dialog drag)//dialog本来是想直接放在el-dialog里面的，但是不行，只好在外面放了一个div。

& ltdiv v-dialog drag & gt；& ltEl-dialog title = & # 34；接收地址& # 34；v-model = & # 34；dialogFormVisible & # 34:modal = & # 34假& # 34；& gt轻微地…

源码

https://gitee . com/nature fw/nf-vite 2-element
/src/control-web/js/dialog drag . js

https://gitee . com/nature fw/nf-vite 2-element/tree/master/src/control-web/js