一个可以拖拽缩放的div？ 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .box {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 200px;
      height: 200px;
      background-color: #f0f0f0;
      cursor: move;
    }

    .resize-handle {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: #000;
    }

    .top-left {
      top: -5px;
      left: -5px;
      cursor: nw-resize;
    }

    .top {
      top: -5px;
      left: calc(50% - 5px);
      cursor: ns-resize;
    }

    .top-right {
      top: -5px;
      right: -5px;
      cursor: ne-resize;
    }

    .right {
      top: calc(50% - 5px);
      right: -5px;
      cursor: ew-resize;
    }

    .bottom-right {
      bottom: -5px;
      right: -5px;
      cursor: se-resize;
    }

    .bottom {
      bottom: -5px;
      left: calc(50% - 5px);
      cursor: ns-resize;
    }

    .bottom-left {
      bottom: -5px;
      left: -5px;
      cursor: sw-resize;
    }

    .left {
      top: calc(50% - 5px);
      left: -5px;
      cursor: ew-resize;
    }
  </style>
</head>

<body>
  <div class="box" id="drag">
    <div class="resize-handle top-left"></div>
    <div class="resize-handle top"></div>
    <div class="resize-handle top-right"></div>
    <div class="resize-handle right"></div>
    <div class="resize-handle bottom-right"></div>
    <div class="resize-handle bottom"></div>
    <div class="resize-handle bottom-left"></div>
    <div class="resize-handle left"></div>
  </div>
</body>
<script>
  const dragElement=document.getElementById("drag");
  // 拖拽功能
  dragElement.addEventListener("mousedown",startDrag);
  function startDrag (event) {
    event.preventDefault();
    const currentHandle=event.target;
    const isResizeHandle=currentHandle.className.includes("resize-handle");
    if(isResizeHandle) return;
    const startX=event.clientX;
    const startY=event.clientY;
    const startLeft=dragElement.offsetLeft;
    const startTop=dragElement.offsetTop;
    document.addEventListener("mousemove",drag);
    document.addEventListener("mouseup",stopDrag);
    function drag (event) {
      const dx=event.clientX-startX;
      const dy=event.clientY-startY;
      const newLeft=startLeft+dx;
      const newTop=startTop+dy;
      dragElement.style.left=newLeft+"px";
      dragElement.style.top=newTop+"px";
    }
    function stopDrag () {
      document.removeEventListener("mousemove",drag);
      document.removeEventListener("mouseup",stopDrag);
    }
  }
  // 缩放功能
  const resizeHandles=document.getElementsByClassName("resize-handle");
  Array.from(resizeHandles).forEach((handle) => {
    handle.addEventListener("mousedown",startResize);
  });

  function startResize (event) {
    event.preventDefault();
    const currentHandle=event.target;
    const direction=currentHandle.className.split(" ")[1];
    const startX=event.clientX;
    const startY=event.clientY;
    const startWidth=dragElement.offsetWidth;
    const startHeight=dragElement.offsetHeight;
    const startLeft=dragElement.offsetLeft;
    const startTop=dragElement.offsetTop;
    document.addEventListener("mousemove",resize);
    document.addEventListener("mouseup",stopResize);
    function resize (event) {
      const dx=event.clientX-startX;
      const dy=event.clientY-startY;
      let width=startWidth,
        height=startHeight,
        left=startLeft,
        top=startTop;
      if(direction.includes("left")) {
        width=startWidth-dx+"px";
        left=startLeft+dx/2+"px";
      }
      if(direction.includes("right")) {
        width=startWidth+dx+"px";
        left=startLeft+dx/2+"px";
      }
      if(direction.includes("top")) {
        height=startHeight-dy+"px";
        top=startTop+dy/2+"px";
      }
      if(direction.includes("bottom")) {
        height=startHeight+dy+"px";
        top=startTop+dy/2+"px";
      }
      if(parseInt(width)<=0||parseInt(height)<=0) return;
      dragElement.style.width=width;
      dragElement.style.height=height;
      dragElement.style.left=left;
      dragElement.style.top=top;
    }
    function stopResize () {
      document.removeEventListener("mousemove",resize);
      document.removeEventListener("mouseup",stopResize);
    }
  }
</script>

</html>

 

 


作者：JYeontu
链接：https://juejin.cn/post/7282951856514793513
来源：稀土掘金

 

posted @ 2023-11-16 17:11  6NULL9  阅读(4)  评论(0)  编辑  收藏  举报