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

觉醒法师

已于 2024-07-01 22:59:31 修改

阅读量2k

点赞数 30

分类专栏： Vue.js 文章标签： vue.js 前端 javascript

于 2024-06-17 15:58:57 首次发布

本文链接：https://blog.csdn.net/jiciqiang/article/details/139731640

版权

Vue.js 专栏收录该内容

23 篇文章 10 订阅

订阅专栏

在实际开发中，会发现有些系统，弹框是可以在浏览器的可见区域自由拖拽的，这极大方便用户的操作。但在查看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;
  }
})

此时，再次拖动弹框，侧会比之前丝滑许多，并且不会出现吸边的情况。弹框的拖拽功能这就已完成了，希望对大家有所帮助。

觉醒法师

关注

30
点赞
踩
33

收藏

觉得还不错? 一键收藏
2
评论
Element-UI实现el-dialog弹框拖拽功能

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

扫一扫

专栏目录