在实际开发中,会发现有些系统,弹框是可以在浏览器的可见区域自由拖拽的,这极大方便用户的操作。但在查看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-dialog
title="提示"
: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-dialog
title="提示"
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);
}
// 监听鼠标移动事件
dialogDOM.onmousemove = e => {
// 不按下的时候,执行移动操作
if(isDown){
console.log('mouse move', e);
}
}
// 监听鼠标松开事件
headerDOM.onmouseup = e => isDown = false;
window.onmouseup = () => 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 = e => isDown = false;
window.onmouseup = () => 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 = e => isDown = false;
window.onmouseup = () => isDown = false;
}
})
3.5 解决移动方向及时纠正问题
比如鼠标正常左移,并未松开鼠标,此时鼠标突然调头右移则无法判断出其为右移动作,一直在执行左移操作;故移到最左侧贴边后,会出现吸边情况,无法往右拖动,直到鼠标松开重新右移方可。
解决此问题,则需要对clientX和clientY作及时更新,即重新操作mousedown时初始化数据,故在事件外定义update()函数,用于mousedown和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 // 表示底部在指定范围
}
}
// 更新数据
function update(e){
// 获取当前鼠标按钮位置坐标
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.onmousedown = e => {
isDown = true;
update(e);
}
// 监听鼠标移动事件
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";
// 更新起始位数据
update(e);
}
}
headerDOM.onmouseup = e => isDown = false;
window.onmouseup = () => isDown = false;
}
})
此时,再次拖动弹框,侧会比之前丝滑许多,并且不会出现吸边的情况。弹框的拖拽功能这就已完成了,希望对大家有所帮助。