操作dom实现一个可以拖拽缩放的div

最新推荐文章于 2024-07-21 12:21:28 发布

拾荒旧痕

最新推荐文章于 2024-07-21 12:21:28 发布

阅读量174

点赞数 3

分类专栏： javascript相关文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_45331969/article/details/137271821

版权

javascript相关专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一. 实现鼠标点击div后，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>
    <link rel="stylesheet" href="./index.css" />
  </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>
    let dragElement = document.getElementById('drag')
    dragElement.addEventListener('mousedown',startDrag)
    // 元素拖动
    function startDrag(event){
      event.preventDefault()
      const currentHandle = event.target
      // console.log('bb',currentHandle.className);
      const isResizeHandle = currentHandle.className.includes("resize-handle")
      if(isResizeHandle) return
      const startX  = event.clientX // 获取当前点击的横向距离
      const startY = event.clientY // 获取当前点击的纵向距离
      const startLeft = dragElement.offsetLeft  // 获取drag盒子距离外层父级div(相对于最近的祖先定位元素)的横向距离
      const startTop = dragElement.offsetTop // 获取drag盒子距离外层父级div的纵向距离
      document.addEventListener("mousemove", drag)
      document.addEventListener("mouseup", stopDrag)
      function drag(e){
        let cx =  e.clientX - startX // 获取横向偏移量
        let cy =  e.clientY - startY  // 获取纵向偏移量
        let newx = cx + startLeft
        let newy = cy + startTop
        dragElement.style.left = newx + 'px'
        dragElement.style.top = newy + 'px'
      }
      function stopDrag() {
        document.removeEventListener("mousemove", drag);
        document.removeEventListener("mouseup", stopDrag);
      }
    }
  </script>
  <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>
</html>

二. 实现鼠标点击锚点，拖拽缩放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>
    <link rel="stylesheet" href="./index.css" />
  </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>
    let dragElement = document.getElementById('drag')
     // 缩放功能
    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] // 获取后面的类名
      let startX = event.clientX // 获取当前点击的横向距离
      let startY = event.clientY  // 获取当前点击的纵向距离
      let startWidth = dragElement.offsetWidth // 获取drag盒子的宽度
      let startHeight = dragElement.offsetHeight //获取drag盒子的高度
      let startLeft = dragElement.offsetLeft // 获取drag盒子距离外层父级div(相对于最近的祖先定位元素)的横向距离
      let startTop = dragElement.offsetTop //获取drag盒子距离外层父级div的纵向距离
      document.addEventListener("mousemove", resize);
      document.addEventListener("mouseup", stopResize);
      function resize(e){
        let cx = e.clientX - startX
        let cy = e.clientY - startY
        let width = startWidth,
            height = startHeight,
            left = startLeft,
            top = startTop
        //不同锚点我们需要对元素进行不同的操作，我们可以分为四个方位来进行判断并区分操作：    
        if(direction.includes('left')){
          left = startLeft + cx/2 + 'px'
          width = width - cx + 'px'
        }
        if(direction.includes('right')){
          left = startLeft + cx/2 + 'px'
          width = width + cx + 'px'
        }
        if(direction.includes('top')){
          top = startTop + cy/2 + 'px'
          height = height - cy + 'px'
        }
        if(direction.includes('bottom')){
          top = startTop + cy/2 + 'px'
          height = height + cy + 'px'
        }
        // 等于0的时候我们不再对其进行缩放操作
        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>
  <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>
</html>