<template>
  <div class="container" id="container">
    <div class="drag-box center" v-drag v-if="isShowDrag">
      <div>无法拖拽出容器的div浮窗</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowDrag: true,
    };
  },
  //自定义指令
  directives: {
    drag: {
      // 指令的定义
      bind: function (drag_dom) {
        drag_dom.onmousedown = (e) => {
          // 按下鼠标时，鼠标相对于被拖拽元素的坐标
          let disX = e.clientX - drag_dom.offsetLeft;
          let disY = e.clientY - drag_dom.offsetTop;

          // 获取容器dom
          let container_dom = document.getElementById("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);
  padding: 10px;
  // 改变鼠标样式为移动图标
  cursor: move;
  // 禁止文字被选中
  user-select: none;
}

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

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>