实现元素拖动,不超出可视区域 Vue

最新推荐文章于 2024-07-13 12:43:11 发布

原创最新推荐文章于 2024-07-13 12:43:11 发布 · 953 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

本文介绍了如何在Vue应用中使用JavaScript和CSS实现一个可拖动的div元素，通过监听mousedown、mousemove和mouseup事件，控制元素在浏览器窗口内的拖动，并设置了拖动范围限制。

实现鼠标按下拖动元素，并限制其拖动范围。
在这里插入图片描述

<template>
  <div>
    <!-- 鼠标点击拖动 -->
    <div ref="dragDiv" class="drag-div" @mousedown="handleMousedown"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {
    handleMousedown(e) {
      let dragDiv = this.$refs.dragDiv;
      // 获取浏览器窗口文档显示区域的宽度和高度,不包括滚动条。
      const { clientWidth, clientHeight } = document.documentElement;
      // 获取鼠标相对于当前元素的位置
      const disX = e.clientX - dragDiv.offsetLeft;
      const disY = e.clientY - dragDiv.offsetTop;
      // 鼠标点击不释放 进行拖动
      document.onmousemove = e => {
        //鼠标位置减去鼠标相对于当前元素的位置 获取此时此刻元素应该处于的位置
        let left = e.clientX - disX;
        let top = e.clientY - disY;
        // 获取元素的宽高
        const { offsetWidth, offsetHeight } = dragDiv;
        // 设置当前元素的位置 不能超出可视区域
        if (left < 0) {
          left = 0;
        }
        if (left > clientWidth - offsetWidth) {
          left = clientWidth - offsetWidth;
        }
        if (top < 0) {
          top = 0;
        }
        if (top > clientHeight - offsetHeight) {
          top = clientHeight - offsetHeight;
        }
        dragDiv.style.left = left + "px";
        dragDiv.style.top = top + "px";

      };

      // 鼠标点击释放 拖动结束
      document.onmouseup = () => {
        document.onmousemove = null;
      };
    }
  }
};
</script>

<style>
.drag-div {
  left: 50px;
  width: 200px;
  height: 200px;
  background: #ddd;
  position: fixed;
}

</style>