Element-UI实现el-dialog弹框拖拽功能

在实际开发中，会发现有些系统，弹框是可以在浏览器的可见区域自由拖拽的，这极大方便用户的操作。但在查看Element-UI中弹框（el-dialog）组件的文档时，发现并未实现这一功能。不过也无须担心，vue中提供了Vue.directive钩子函数，可以从底层操作DOM来实现并升级弹框拖拽的功能。

对于Vue.directive这里就不再阐述了，上一篇中已作了相关说明，不了解此功能的朋友可以翻看一上篇了解下，地址：Element-UI - 解决el-table中图片悬浮被遮挡问题-CSDN博客，或者去官方文档了解。另外，上篇是通过自定义指令的局部定义方式实现的，此篇将通过全局模式进行定义和开发。

一、演示页面创建

首先我们在Vue项目中，创建一个页面用于演示拖拽功能的实现。代码如下：

<template><div><div class="right-box"><el-button type="primary" size="mini" @click="dialogVisible = true">新增</el-button></div><el-dialogtitle="提示":visible.sync="dialogVisible"width="30%"><span>这是一个弹框，升级其功能，能在浏览器可见区域自由拖拽</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog></div>
</template><script>
export default {data(){return {dialogVisible: false}},
}
</script><style lang="less" scoped>
.right-box{text-align: right;padding-bottom: 15px;
}
</style>

界面效果：

二、定义v-dialogDrag

这里在Vue项目中src/utils目录中创建dialog.js，用来定义Vue-directive('dialogDrag', {})；代码如下：

import Vue from 'vue'
/*** 新增弹框拖拽功能*/
Vue.directive('dialogDrag', {bind: (el) => {console.log('v-dialogDrag');}
})

在main.js文件中引入dialog.js，代码如下：

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/utils/dialog.js'Vue.use(ElementUI)Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

页面中的el-dialog标签上添加v-dialogDrag，代码如下：

<template><div><div class="right-box"><el-button type="primary" size="mini" @click="dialogVisible = true">新增</el-button></div><el-dialogtitle="提示"v-dialogDrag:visible.sync="dialogVisible"width="30%"><span>这是一个弹框，升级其功能，能在浏览器可见区域自由拖拽</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog></div>
</template>

在定义v-dialogDrag时，在钩子函数中添加了控制台输出，bind是一次性的初始化设置，所以在组件绑定后只调用一次。此时查看控制台可以看到输出内容，如下图：

三、DOM操作

在bind钩子函数中，将接收到的参数el输出查看可以发现，el为弹框的DOM节点。此时，我们就可以通过el节点获取到弹框标题.el-dialog__header部分，并对其进行事件监听，实现弹框拖拽功能。

3.1 修改鼠标样式

修改弹框标题区域鼠标样式，当鼠标放到标题区域时呈现出移动图标，代码如下：

Vue.directive('dialogDrag', {bind: (el) => {// 获取弹框标题区域DOM节点const headerDOM = el.querySelector('.el-dialog__header');// 修改鼠标图标样式headerDOM.style.cursor = "move";// 禁止拖拽时选中标题中文本内容headerDOM.style.userSelect = "none";console.log('v-dialogDrag', el);}
})

3.2 添加监听事件

对于拖拽功能会使用到onmousedown、onmousemove、onmouseup三个事件，分别对应鼠标按下、鼠标移动、鼠标松开三个动作。代码如下：

Vue.directive('dialogDrag', {bind: (el) => {// 获取弹框标题区域DOM节点const headerDOM = el.querySelector('.el-dialog__header');// 修改鼠标图标样式headerDOM.style.cursor = "move";// 禁止拖拽时选中标题中文本内容headerDOM.style.userSelect = "none";// 获取弹框区域的DOM节点const dialogDOM = el.querySelector('.el-dialog');let isDown = false;   //是否按下// 监听鼠标按下事件headerDOM.onmousedown = e => {isDown = true;console.log('mouse down', e);}// 监听鼠标移动事件headerDOM.onmousemove = e => {// 不按下的时候，执行移动操作if(isDown){console.log('mouse move', e);}}// 监听鼠标松开事件headerDOM.onmouseup = e => {console.log('mouse up', e);isDown = false;     //}}
})

使用鼠标在住标题区域，进行按下、移动、松开等操作，查看控制台输出结果如下：

3.3 计算并重置弹框位置

现在我们则可以通过获取相应的参数数据，对弹框进行位置计算，使其根据鼠标移动的位置进行拖拽了。代码如下：

Vue.directive('dialogDrag', {bind: (el) => {// 获取弹框标题区域DOM节点const headerDOM = el.querySelector('.el-dialog__header');// 修改鼠标图标样式headerDOM.style.cursor = "move";// 禁止拖拽时选中标题中文本内容headerDOM.style.userSelect = "none";// 获取弹框区域的DOM节点const dialogDOM = el.querySelector('.el-dialog');let isDown = false,         // 是否按下// 鼠标按下时坐标位置clientX = 0,clientY = 0,// 按下时弹框位置dialogLeft = 0,dialogTop = 0;// 监听鼠标按下事件headerDOM.onmousedown = e => {isDown = true;// 获取当前鼠标按钮位置坐标clientX = e.clientX;clientY = e.clientY;// 获取弹框位置（默认情况弹框样式left和top可能不存在，当为NaN时初始化为0）dialogLeft = isNaN(parseFloat(dialogDOM.style.left))?0:parseFloat(dialogDOM.style.left);dialogTop = isNaN(parseFloat(dialogDOM.style.top))?0:parseFloat(dialogDOM.style.top);}// 监听鼠标移动事件headerDOM.onmousemove = e => {// 不按下的时候，执行移动操作if(isDown){// 获取当前移动到的位置坐标,与按下位置坐标进行计算，获取移动距离const distX = e.clientX - clientX;const distY = e.clientY - clientY;// 修改弹框位置dialogDOM.style.left = (dialogLeft + distX) + "px";dialogDOM.style.top = (dialogTop + distY) + "px";}}headerDOM.onmouseup = () => isDown = false;         // 监听标题区域鼠标是否松开dialogDOM.onmouseleave = () => isDown = false;      // 监听鼠标是否移出弹框区域}
})

以上对计算方法都代码中进行说明了，大家可根据解释进行实操并体会其中原理。以上功能实现后，弹框则可以通过按住标题区域进行拖放了。如下图：

3.4 限定区域

当弹框拖拽功能实现后，会发现其有时会超出界面范围，并影响拖拽效果。对于这块，我们可以通过计算，来限定其可移动范围。

之前我们学习过getBoundingClientRect()可获取DOM元素的边界信息，当left或top小于0时，则弹框已超出了顶部或者左侧可见区域，判断是否超过右侧或底部可见区域，则需要通过width和height，以及window.innerWidth和window.innerHeight结合计算得出结论。

通过上述的分析，我们来定义一个函数用于判断当前时否可执行移动操作。代码如下：

// 定义函数判断当前是否在可见范围内
function boundingRange(){const bounding = dialogDOM.getBoundingClientRect();return {top: bounding.top >= 0,       // 表示顶部在可见范围left: bounding.left >= 0,     // 表示左侧在可见范围right: bounding.left <= window.innerWidth - bounding.width,   // 表示右侧在指定范围bottom: bounding.top < window.innerHeight - bounding.height   // 表示底部在指定范围}
}

当添加到移动事件中并获取边界范围，通过获取的结果来判断是否为可操作状态。true为可操作，false为不可操作。如下图：

此时，我们要在mousemove事件中对计算方式修改一下，最终完整代码如下：

Vue.directive('dialogDrag', {bind: (el) => {// 获取弹框标题区域DOM节点const headerDOM = el.querySelector('.el-dialog__header');// 修改鼠标图标样式headerDOM.style.cursor = "move";// 禁止拖拽时选中标题中文本内容headerDOM.style.userSelect = "none";// 获取弹框区域的DOM节点const dialogDOM = el.querySelector('.el-dialog');let isDown = false,         // 是否按下// 鼠标按下时坐标位置clientX = 0,clientY = 0,// 按下时弹框位置dialogLeft = 0,dialogTop = 0;// 定义函数判断当前是否在可见范围内function boundingRange(){const bounding = dialogDOM.getBoundingClientRect();return {top: bounding.top >= 0,       // 表示顶部在可见范围left: bounding.left >= 0,     // 表示左侧在可见范围right: bounding.left < window.innerWidth - bounding.width,   // 表示右侧在指定范围bottom: bounding.top < window.innerHeight - bounding.height   // 表示底部在指定范围}}// 监听鼠标按下事件headerDOM.onmousedown = e => {isDown = true;// 获取当前鼠标按钮位置坐标clientX = e.clientX;clientY = e.clientY;// 获取弹框位置（默认情况弹框样式left和top可能不存在，当为NaN时初始化为0）dialogLeft = isNaN(parseFloat(dialogDOM.style.left))?0:parseFloat(dialogDOM.style.left);dialogTop = isNaN(parseFloat(dialogDOM.style.top))?0:parseFloat(dialogDOM.style.top);}// 监听鼠标移动事件headerDOM.onmousemove = e => {// 不按下的时候，执行移动操作if(isDown){// 获取DOM边界范围const range = boundingRange();// 获取当前移动到的位置坐标,与按下位置坐标进行计算，获取移动距离const distX = e.clientX - clientX;          // distX小于0为向左，大于0为向右const distY = e.clientY - clientY;          // distY小于0为向上，大于0为向下// 判断左侧或右侧是否可移动if((range.left && distX < 0) || (range.right && distX >= 0)) dialogDOM.style.left = (dialogLeft + distX) + "px";// 判断顶部或者底部是否可移动if((range.top && distY < 0) || (range.bottom && distY >= 0)) dialogDOM.style.top = (dialogTop + distY) + "px";}}headerDOM.onmouseup = () => isDown = false;         // 监听标题区域鼠标是否松开dialogDOM.onmouseleave = () => isDown = false;      // 监听鼠标是否移出弹框区域}
})

目前弹框的拖拽功能就已完成了，希望对大家有所帮助。