js实现拖拽元素实现选择和删除代码

最新推荐文章于 2023-10-09 20:37:19 发布

#麻辣小龙虾#

最新推荐文章于 2023-10-09 20:37:19 发布

阅读量660

点赞数 1

分类专栏： javascript web前端

本文链接：https://blog.csdn.net/CodingNoob/article/details/102561479

版权

web前端同时被 2 个专栏收录

99 篇文章 2 订阅

订阅专栏

javascript

90 篇文章 1 订阅

订阅专栏

我们上网的时候讲过一些平台在选择一些选项的时候采用拖拽的方式将选项拖入指定位置完成选择，现在我们就自己来实现一下类似的效果。

结果如下：

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>js置顶动画</title>
    <style>
      *{margin:0;padding:0;user-select:none;}
      .move-box {height:100px;width:100px;line-height:100px;text-align:center;font-size:14px;background:#ccc;margin:0 auto;position:relative;transition:all .1s;}
      .drag-box{width:1000px;margin:100px auto;border:1px dashed #ccc;font-size:0;background:url('./img/bg1.png') no-repeat center;background-size:80px;}
      .drag-box::after{content:'';display:block;clear:both;} /***清浮动***/
      .drag-box .label{height:100px;width:0;color:#fff;line-height:0;text-align:center;font-size:14px;display:inline-block;background:blue;}
      .drag-box .close-btn{padding:2px;margin-left:10px;background:#eee;}
    </style>
</head>
<body>
  <div class="move-box">拖动元素</div>
  <div class="drag-box">
    <div class="label"></div>
  </div>
</body>
<script>
  (function(){
    let boxId = 0; 
    let startX = null;
    let startY = null;
    let mouseX = null;
    let mouseY = null;
    let mBox = null;
    function $$(str) {return document.querySelectorAll(str);}
    // 计算鼠标是否在需要放置的框内
    function computInEle(ele, x, y){
      let left = ele.getBoundingClientRect().left;
      let top = ele.getBoundingClientRect().top;
      let width = ele.getBoundingClientRect().width;
      let height = ele.getBoundingClientRect().height;
      let xFlag = ( x > left && x < (left + width));
      let yFlag = ( y > top && y < (top + height));
      if (xFlag && yFlag) {
        return true;
      } else {
        return false;
      }
    }
    // 删除元素
    $$('.drag-box')[0].onclick = function(e){
      console.log(e);
      if (e.srcElement.className == 'close-btn') {
        this.removeChild(e.srcElement.parentNode);
        setTimeout(() => {
          alert('删除成功！');
        }, 0);
      }
    }
    // 鼠标按下复制一个元素
    $$('.move-box')[0].onmousedown = function(e){
      mouseX = e.pageX;
      mouseY = e.pageY;
      startX = this.getBoundingClientRect().left;
      startY = this.getBoundingClientRect().top;
      console.log(this.getBoundingClientRect());
      // 复制一个元素追加到body模拟跟随鼠标移动效果
      mBox = this.cloneNode(true);
      mBox.style.position = 'fixed';
      mBox.style.zIndex = '9999';
      mBox.style.opacity = '.75';
      mBox.style.left = startX + 'px';
      mBox.style.top = startY + 'px';
      mBox.id = 'moveBox' + (boxId++);
      document.body.appendChild(mBox);
      document.onmousemove = function(e){
        mBox.style.left = startX + (e.pageX - mouseX) + 'px';
        mBox.style.top = startY + (e.pageY - mouseY) + 'px';
      };
    };
    // 鼠标按下放开事件
    document.onmouseup = function(e){
      let x = e.pageX;
      let y = e.pageY;
      let ele = $$('.drag-box')[0];
      console.log(computInEle(ele, x, y));
      if (mBox) {
        // 松开鼠标时鼠标在拖拽框内，则将复制的元素追加到拖拽框内
        if (computInEle(ele, x, y)) {
          mBox.style.position = 'static';
          mBox.style.display = 'block';
          mBox.style.float = 'left';
          mBox.style.margin = 'auto';
          mBox.style.opacity = '1';
          mBox.innerText = mBox.innerText +(boxId - 1);
          let close = document.createElement('span');
          close.className = 'close-btn';
          close.innerText = '×';
          close.title = '删除元素';
          mBox.appendChild(close);
          ele.appendChild(mBox);
          mBox.onmousedown = null;
        } else {
          // 松开鼠标时鼠标不在拖拽框内，移除复制的元素
          mBox.style.left = startX + 'px';
          mBox.style.top = startY + 'px';
          document.body.removeChild(document.body.lastElementChild);
        }
        startX = null;
        startY = null;
        mouseX = null;
        mouseY = null;
        mBox = null;
        document.onmousemove = null;
      }
    };
  })();
</script>
</html>

#麻辣小龙虾#

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js实现拖拽元素实现选择和删除代码

我们上网的时候讲过一些平台在选择一些选项的时候采用拖拽的方式将选项拖入指定位置完成选择，现在我们就自己来实现一下类似的效果。结果如下：代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>js置顶动画</title&gt...
复制链接

扫一扫