拖拽并复制到指定区域

划水为生的前端

于 2024-05-15 14:22:20 发布

阅读量235

点赞数 4

分类专栏：自写功能文章标签： js css html

本文链接：https://blog.csdn.net/m0_47587616/article/details/138906791

版权

自写功能专栏收录该内容

14 篇文章 0 订阅

订阅专栏

拖拽并复制到指定区域

代码
演示图片

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .test {
        width: 100px;
        height: 50px;
        background-color: red;
        border-radius: 50%;
        user-select: none;
      }
      
      .test2 {
        width: 300px;
        height: 300px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="test" id="testDiv">
      test
    </div>
    
    <div class="test2" id="canvasDom"></div>
  </body>
  
  <script>
    const bodyDom = document.querySelector('body')
    const canvasDom = document.getElementById('canvasDom')
    const tdd = document.getElementById('testDiv')
    let dragingDom = null
    let dragWrap = null
    tdd.addEventListener('mousedown', itemMouseDown)
    
    // 拖动
    function itemDrag(e) {
      const { clientX, clientY } = e
      if (dragingDom) {
        const { clientWidth, clientHeight } = dragingDom
        // 保证鼠标在拖动元素的中心点
        dragWrap.style.top = `${clientY - clientHeight / 2 }px`
        dragWrap.style.left = `${clientX - clientWidth / 2 }px`
      }
    }
    
    // 鼠标抬起事件
    function itemMouseUp(e) {
      // 删除临时复制dom
      bodyDom.removeChild(dragWrap)
      dragWrap = null
      // 回收
      document.addEventListener('mouseover', isInCanvas)
      document.removeEventListener('mousemove', itemDrag)
      document.removeEventListener('mouseup', itemMouseUp)
    }

    // 判断是否拖到指定dom区域
    function isInCanvas(e) {
      const { clientX, clientY } = e
      const { offsetLeft, offsetTop, offsetHeight, offsetWidth } = canvasDom

      // 判断是否超出范围
      let flag = (
        clientX > offsetLeft
        && clientX < offsetLeft + offsetWidth
        && clientY > offsetTop
        && clientY < offsetHeight + offsetTop
      )
      
      // 将dom元素置入指定区域
      if (dragingDom && flag) {
        e.target.appendChild(dragingDom)
      }
      // 回收
      dragingDom = null
      document.removeEventListener('mouseover', isInCanvas)
    }

    // 事件触发器
    function itemMouseDown(e) {
      const { clientX, clientY, target } = e
      const { clientWidth, clientHeight } = target
    
      // 点击待拖动元素时克隆一个新的dom元素，作为虚化显示效果
      const cloneT = e.target.cloneNode(true)
      dragWrap = document.createElement('div')
      dragWrap.style.opacity = 0.3
      dragWrap.style.position = 'absolute'
      dragWrap.style.cursor = 'pointer'
      dragWrap.style.top = `${clientY - clientHeight / 2 }px`
      dragWrap.style.left = `${clientX - clientWidth / 2 }px`
      dragWrap.appendChild(cloneT)
      dragingDom = cloneT
      bodyDom.appendChild(dragWrap)
    
      document.addEventListener('mousemove', itemDrag)
      document.addEventListener('mouseup', itemMouseUp)
    }
  </script>
</html>