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-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;
  }
})

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

  • 25
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue中使用element-uiel-dialog对话框并实现拖动功能,可以使用vue-draggable-resizable插件来实现。 1. 安装插件 使用npm或者yarn进行安装。 ``` npm install vue-draggable-resizable --save ``` 或者 ``` yarn add vue-draggable-resizable ``` 2. 引入插件 在Vue组件中引入vue-draggable-resizable插件,并注册为全局组件。 ```javascript import Vue from 'vue' import VueDraggableResizable from 'vue-draggable-resizable' import 'vue-draggable-resizable/dist/VueDraggableResizable.css' Vue.component('vue-draggable-resizable', VueDraggableResizable) ``` 3. 使用插件 在el-dialog组件中嵌套vue-draggable-resizable组件,并设置对话框的宽度和高度。 ```html <template> <div> <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> <vue-draggable-resizable :w="dialogWidth" :h="dialogHeight"> <p>这是一个可以拖动的对话框</p> </vue-draggable-resizable> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false, dialogWidth: 400, dialogHeight: 300 } }, methods: { handleClose(done) { this.dialogVisible = false done() } } } </script> ``` 在这个示例中,我们将vue-draggable-resizable组件嵌套在el-dialog组件中,并设置了对话框的宽度和高度。我们还定义了一个handleClose方法来处理对话框关闭的事件。 现在你可以在Vue中使用element-uiel-dialog对话框并实现拖动功能了。注意:vue-draggable-resizable插件的样式可能需要根据自己的需求进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值