vue 指定区域可拖拽的限定拖拽区域的div(如仅弹窗标题可拖拽的弹窗)

html 复制代码
<template>
  <div class="container" ref="container">
    <div class="drag-box" v-drag>
      <div class="win_head">弹窗标题</div>
      <div class="win_content">弹窗内容</div>
    </div>
  </div>
</template>

<script>
export default {
  //自定义指令
  directives: {
    drag: {
      // 指令的定义
      bind: function (el, binding, vnode) {
        // 获取到vue实例
        let that = vnode.context;
        let drag_dom = el;
        // 获取到拖拽区
        let drag_handle = el.querySelector(".win_head");
        // 鼠标在拖拽区按下时触发拖拽
        drag_handle.onmousedown = (e) => {
          // 按下鼠标时,鼠标相对于被拖拽元素的坐标
          let disX = e.clientX - drag_dom.offsetLeft;
          let disY = e.clientY - drag_dom.offsetTop;

          // 获取容器dom
          let container_dom = that.$refs.container;

          document.onmousemove = (e) => {
            // 用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
            let left = e.clientX - disX;
            let top = e.clientY - disY;

            // 在容器范围内移动时,被拖拽元素的最大left值
            let leftMax =
              container_dom.offsetLeft +
              (container_dom.clientWidth - drag_dom.clientWidth);

            // 在容器范围内移动时,被拖拽元素的最小left值
            let leftMin = container_dom.offsetLeft + 1; //此处+1为容器的边框1px

            if (left > leftMax) {
              drag_dom.style.left = leftMax + "px";
            } else if (left < leftMin) {
              drag_dom.style.left = leftMin + "px";
            } else {
              drag_dom.style.left = left + "px";
            }

            // 在容器范围内移动时,被拖拽元素的最大left值
            let topMax =
              container_dom.offsetTop +
              (container_dom.clientHeight - drag_dom.clientHeight);

            // 在容器范围内移动时,被拖拽元素的最小left值
            let topMin = container_dom.offsetTop + 1; //此处+1为容器的边框1px

            if (top > topMax) {
              drag_dom.style.top = topMax + "px";
            } else if (top < topMin) {
              drag_dom.style.top = leftMin + "px";
            } else {
              drag_dom.style.top = top + "px";
            }
          };

          document.onmouseup = () => {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.drag-box {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 300px;
  height: 100px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  // 禁止文字被选中
  user-select: none;
}

.container {
  border: 1px solid red;
  width: 600px;
  height: 300px;
  margin: 30px;
}

.win_head {
  background-color: rgb(45, 141, 250);
  color: white;
  height: 30px;
  line-height: 30px;
  font-weight: bold;
  padding-left: 10px;
  cursor: move;
}
.win_content {
  padding: 10px;
}
</style>
相关推荐
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
天若有情6738 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
草巾冒小子9 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
eggcode9 小时前
Vue+Openlayers加载OSM、加载天地图
vue.js·openlayers·webgis
武昌库里写JAVA12 小时前
vue3面试题(个人笔记)
java·vue.js·spring boot·学习·课程设计
lalalalalalalala13 小时前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy13 小时前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js
久爱@勿忘14 小时前
第二章:创建登录页面
前端·vue.js·elementplus
Jinxiansen021114 小时前
Vue 3 中父子组件双向绑定的 4 种方式
javascript·vue.js·ecmascript
木依14 小时前
Vue3 Element plus table有fixed列时错行
javascript·vue.js·elementui