弹窗拖拽

584911253@qq.com

2023-03-17 93e5f27c609e52b64b689056413528137006774a

弹窗拖拽

 src/views/Tools/queryinfo.vue

@@ -11,7 +11,7 @@
      top="calc(100% - 470px) "
    >
      <div>
        <div style="width:940px;height:400px;">
        <div style="width:940px;height:400px;" v-drag>
          <map-menu-pop v-if="$store.state.mapPopBoxFlag == '1'" />
          <map-space-pop v-if="$store.state.mapPopBoxFlag == '2'" />
          <pipe-line-analy v-if="$store.state.mapPopBoxFlag == '3'" />
@@ -51,6 +51,36 @@



  },
  directives: {
    drag: {
      inserted: function (el) {
        const dragDom = el;
        dragDom.style.cursor = "e-resize";
        dragDom.onmousedown = (e) => {
          // 鼠标按下，计算当前元素距离可视区的距离
          const disX = e.clientX;
          const w = dragDom.clientWidth;
          const minW = 500;
          const maxW = 940;
          var nw;
          document.onmousemove = function (e) {
            // 通过事件委托，计算移动的距离
            const l = e.clientX - disX;
            // 改变当前元素宽度，不可超过最小最大值
            nw = w + l;
            nw = nw < minW ? minW : nw;
            nw = nw > maxW ? maxW : nw;
            dragDom.style.width = `${nw}px`;
          };

          document.onmouseup = function (e) {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      },
    },
  },
  methods: {
    // 关闭所有
@@ -115,6 +145,10 @@
        Math.random().toString().substr(2, 5)
      );
    },
    mouseDown(event) {
      // document.addEventListener("mousemove", this.mouseMove);
      // this.lastX = event.screenX;
    },
  },
};
</script>