首页 前端知识 Element-UI实现el-dialog弹框拖拽功能

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

2024-07-27 22:07:24 前端知识 前端哥 543 487 我要收藏

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

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14426.html
标签
评论
发布的文章

Unity数据持久化之Json

2024-08-10 22:08:00

simdjson 高性能JSON解析C 库

2024-08-10 22:08:00

npm常用命令详解(一)

2024-08-10 22:08:34

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!