拖拽div的四边，改变div的大小

最新推荐文章于 2024-06-07 18:10:23 发布

小海鸥飞

最新推荐文章于 2024-06-07 18:10:23 发布

阅读量345

点赞数 1

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/m0_48636561/article/details/137511635

版权

该篇文章详细描述了如何在Vue项目中使用JavaScript和CSS实现一个可调整大小的黑色盒子，通过监听mousedown、mousemove和mouseup事件，以及计算鼠标移动的距离来改变盒子的宽度和高度。

摘要由CSDN通过智能技术生成

在这里插入图片描述

要求：点击黑色边缘的盒子，点住然后拉拽，改变盒子的大小，vue项目

思路：给盒子四周定位上四条线，给四条线绑定方法，获取拖拽开始到结束的x、y位置上的变化，通过js对宽高进行改变

注释：blackBox为黑色边缘盒子，topLine、rightLine、bottomLine、leftLine为div模拟的红色线条

<div class="blackBox"
	<div
        class="topLine"
        @mousedown="
          e => {
            handleMouseDown(e, 'top');
          }
        "
      ></div>
      <div
        class="rightLine"
        @mousedown="
          e => {
            handleMouseDown(e, 'right');
          }
        "
      ></div>
      <div
        class="bottomLine"
        @mousedown="
          e => {
            handleMouseDown(e, 'bottom');
          }
        "
      ></div>
      <div
        class="leftLine"
        @mousedown="
          e => {
            handleMouseDown(e, 'left');
          }
        "
      ></div>
</div>

.blackBox{
	width:200px;
	height:200px;
	border: 1px solid black;
	position: relative;
	.topLine {
    width: 100%;
    height: 1px;
    cursor: ns-resize;
    background-color: red;
    position: absolute;
    top: 0px;
    left: 0px;
  }
  .rightLine {
    width: 1px;
    height: 100vh;
    background-color: red;
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: ew-resize;
  }
  .bottomLine {
    width: 100%;
    height: 1px;
    background-color: red;
    position: absolute;
    bottom: 0px;
    left: 0px;
    cursor: ns-resize;
  }
  .leftLine {
    width: 1px;
    height: 100vh;
    background-color: red;
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: ew-resize;
  }
}

methods:{
	 handleMouseDown(event, value) {
      this.$nextTick(() => {
        let isDragging = false; // 判断是否正在拖动
        let startX = null; // 记录起始位置的x坐标
        let startY = null; // 记录起始位置的y坐标
        let initialWidth = null; // 记录初始宽度
        let initialHeight = null; // 记录初始高度
        let initialTop = null; // 记录初始top
        let initialLeft = null; // 记录初始left

        const blackBoxEle = document.querySelector(
          ".blackBox"
        ); // 获取盒子元素

        event.preventDefault(); // 防止默认行为（如选中文本）
        isDragging = true;
        startX = event.clientX; // 记录起始位置的x坐标
        startY = event.clientY; // 记录起始位置的y坐标
        initialWidth = parseInt(getComputedStyle(blackBoxEle).width); // 记录初始宽度
        initialHeight = parseInt(getComputedStyle(blackBoxEle).height); // 记录初始高度
        initialTop = parseInt(getComputedStyle(blackBoxEle).top); // 记录初始top
        initialLeft = parseInt(getComputedStyle(blackBoxEle).left); // 记录初始left

        const handleMouseMove = (event, value) => {
          if (isDragging) {
            if (value === "top" || value === "bottom") {
              const deltaY = event.clientY - startY; // 计算鼠标相对于起始位置的垂直距离
              const newHeight =
                value === "top"
                  ? initialHeight - deltaY
                  : initialHeight + deltaY; // 新的高度等于原有高度加上距离变化量

              blackBoxEle.style.height = newHeight + "px"; // 设置盒子的高度

              if (value === "top") {
                blackBoxEle.style.top = initialTop + deltaY + "px";
              }
            } else if (value === "right" || value === "left") {
              const deltaX = event.clientX - startX; // 计算鼠标相对于起始位置的水平距离
              const newWidth =
                value === "left"
                  ? initialWidth - deltaX
                  : initialWidth + deltaX; // 新的宽度等于原有宽度加上距离变化量

              blackBoxEle.style.width = newWidth + "px"; // 设置盒子的宽度
              if (value === "left") {
                blackBoxEle.style.left = initialLeft + deltaX + "px";
              }
            }
          }
        };
        function handleMouseUp() {
          isDragging = false;
        }

        document.addEventListener("mousemove", e => {
          handleMouseMove(e, value);
        });
        document.addEventListener("mouseup", handleMouseUp);
      });
    },
},
beforeDestroy() {
  document.onmousemove = null;
  document.onmouseup = null;
},