【vue弹框和div拖拽功能】vue-elementul弹框拖拽功能，移动拖拽功能，普通div拖拽功能【拿来即用，直接复制】

前言

这里是通过vue的指令封装好的
直接创建一个js文件复制进去，引入一下就搞定了，非常简单

html版本引入vue语法的div和弹框拖拽功能

这里是考虑到有时候会在html页面开发的时候也会用到这个拖拽等功能。
就在这里又写了一个版本的。
是html页面引入了vue的语法开发的
这种情况也是一些项目常用的情况。
想要这种版本的可以跳转另一个帖子查看
点击这里跳转

效果图

大体就是这样，鼠标放到上面的时候可以拖拽位移
到视口的边缘的时候停止不会被移出去。
完成这个功能分为三步走，下面跟着来吧

第一步：

创建一个js文件，把这段代码直接复制进去，不用修改
这里js的名字你们可以自行修改啊，不用一定跟我的一样。

import Vue from 'vue'

// v-dialogDrag: 弹窗拖拽属性
Vue.directive('dialogDrag', {
  bind(el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    const dragDom = el.querySelector('.el-dialog')
    // dialogHeaderEl.style.cursor = 'move';
    dialogHeaderEl.style.cssText += ';cursor:move;'
    dragDom.style.cssText += ';top:0px;'

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = (function() {
      if (window.document.currentStyle) {
        return (dom, attr) => dom.currentStyle[attr]
      } else {
        return (dom, attr) => getComputedStyle(dom, false)[attr]
      }
    })()

    dialogHeaderEl.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop

      const screenWidth = document.body.clientWidth // body当前宽度
      const screenHeight = document.documentElement.clientHeight // 可见区域高度(应为body高度，可某些环境下无法获取)

      const dragDomWidth = dragDom.offsetWidth // 对话框宽度
      const dragDomheight = dragDom.offsetHeight // 对话框高度

      const minDragDomLeft = dragDom.offsetLeft
      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth

      const minDragDomTop = dragDom.offsetTop
      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight

      // 获取到的值带px 正则匹配替换
      let styL = sty(dragDom, 'left')
      let styT = sty(dragDom, 'top')

      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (styL.includes('%')) {
        styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
        styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
      } else {
        styL = +styL.replace(/\px/g, '')
        styT = +styT.replace(/\px/g, '')
      }

      document.onmousemove = function(e) {
        // 通过事件委托，计算移动的距离
        let left = e.clientX - disX
        let top = e.clientY - disY

        // 边界处理
        if (-(left) > minDragDomLeft) {
          left = -(minDragDomLeft)
        } else if (left > maxDragDomLeft) {
          left = maxDragDomLeft
        }

        if (-(top) > minDragDomTop) {
          top = -(minDragDomTop)
        } else if (top > maxDragDomTop) {
          top = maxDragDomTop
        }

        // 移动当前元素
        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
      }

      document.onmouseup = function(e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

第二步：

去main.js文件内引入你刚才创建的js文件，建议这个文件放在utils内，
我这是做案例，所以随便放在了外面，自行修改你的引入路径

import'./dialog.js'

第三步：

去你的弹窗的页面，在你的弹窗上加上v-dialogDrag的指令。
这样子就完成了，试试效果吧

拖拽div的方法，更简单了！

这里注意的点是，你要移动的div一定要加定位的，不加定位不能移动！！！！！！！！

<template>
  <div class="wrap">
    <div v-drag class="box">按住拖拽</div>
  </div>
</template>

<script>
export default {
  directives: {
    // 自定义指令 实现可拖动
    drag(el, bindings) {
      el.onmousedown = function (e) {
        var disx = e.pageX - el.offsetLeft;
        var disy = e.pageY - el.offsetTop;
        document.onmousemove = function (e) {
          el.style.left = e.pageX - disx + "px";
          el.style.top = e.pageY - disy + "px";
        };
        document.onmouseup = function () {
          document.onmousemove = document.onmouseup = null;
        };
      };
    },
  },
};
</script>

<style scoped>
.box {
  height: 100px;
  width: 100px;
  background-color: #ccc;
  position: absolute;
  top: 200px;
  left: 100px;
  cursor: pointer;
}
.wrap {
  position: relative;
}
</style>

到这里就结束了，有什么不会的可以评论提问