九宫格拖拽换位置，效果最全，最明显

UniverseEast

于 2023-03-15 21:51:58 发布

阅读量319

点赞数

分类专栏：前端文章标签： html5 javascript css Powered by 金山文档

本文链接：https://blog.csdn.net/UniverseEast/article/details/129570292

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

直接C V !!!!!!!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>九宫格拖拽</title>
  </head>
  <style type="text/css">
    #content {
      position: relative;
    }
    #content div {
      width: 100px;
      height: 100px;
      float: left;
      line-height: 100px;
      text-align: center;
      font-size: 40px;
      font-weight: 900;
      color: #fff;
      cursor: pointer;
      position: absolute;
      border-radius: 10px;
    }

    #content .draging {
      position: absolute;
    }
  </style>
  <body>
    <div id="content">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
    <script type="text/javascript">
      var content = document.getElementById("content");
      var items = content.querySelectorAll("div");
      //   console.log(items);
      //随机颜色
      function colorFn() {
        var o = parseInt(Math.random() * 256);
        var t = parseInt(Math.random() * 256);
        var s = parseInt(Math.random() * 256);
        var str = "rgb(" + o + "," + t + "," + s + ")";
        return str;
      }
      //给每个div添加一个随机背景色，并确定它们的位置
      var r = items[0].clientHeight;
      items.forEach((v, i) => {
        v.style.backgroundColor = colorFn();
        v.style.top = Math.floor(i / 3) * (r + 10) + "px";
        v.style.left = (i % 3) * (r + 10) + "px";
      });
      function itemBox(itemName) {
        itemName.onmousedown = function (evt1) {
          var e = evt1 || window.event;
          //在鼠标点下item的时候克隆一个新的一模一样的名为cloneDiv
          var cloneDiv = document.createElement("div");
          //把样式文字赋给克隆div
          cloneDiv.innerHTML = itemName.innerHTML;
          cloneDiv.style.backgroundColor =
            getComputedStyle(itemName).backgroundColor;
          //使克隆div的class名为draging，使克隆div加绝对定位position：absolute
          cloneDiv.className = "draging";
          //克隆div的定位top left  和原div相同
          cloneDiv.style.top = itemName.offsetTop + "px";
          cloneDiv.style.left = itemName.offsetLeft + "px";
          //把kelongdiv加入到concent大盒子当中
          content.appendChild(cloneDiv);
          //算出鼠标点击克隆div时，鼠标在克隆div中的相对位置
          var offsetX = evt1.pageX - cloneDiv.offsetLeft;
          var offsetY = evt1.pageY - cloneDiv.offsetTop;
          //              cloneDiv.style.zIndex = 10;
          //鼠标开始移动的时候
          document.onmousemove = function (evt) {
            var e2 = evt || window.event;
            //克隆div定位的left  top   evt.pageX鼠标点相对于整个文档中的位置， offsetX鼠标相对于克隆div中的位置     二者相减就是克隆div相对于整个文档中的位置
            cloneDiv.style.left = evt.pageX - offsetX + "px";
            cloneDiv.style.top = evt.pageY - offsetY + "px";
          };
          //当鼠标松开的时候
          document.onmouseup = function () {
            //先把移动事件停止
            document.onmousemove = null;
            //需要判断 clonediv 的位置距 那个div 最近
            //先获取到content大盒子下所有的div
            var divs = content.getElementsByTagName("div");
            // console.log(divs.length);
            //然后判断移动到位置距离哪一个最近
            var min = 800; //考虑到被拖拽的div拖拽到大盒子之外还能进行交换，距离设为大盒子外   方圆800px
            var minDiv = null; //设一个空的div用来交换位置
            for (var i = 0; i < divs.length - 1; i++) {
              //遍历出除了鼠标移动的div外的所有的div  也就是length - 1
              var div = divs[i];
              //div cloneDiv
              //distance(cloneDiv,div)返回值为c，c为两div之间的距离
              var dis = distance(cloneDiv, div); //调用运用勾股定理进行比较距离的函数
              if (dis <= min) {
                //a^2 + b^2 和c^2比较
                min = dis;
                minDiv = div;
              }
            }
            //把距离小的那个div的样式给拖拽走空出来的div  itemName
            //如果这样赋值的话target的innerHTML就会丢失都变成minDiv.innerHTML，所以的设一个中转变量，让两者交换。background同理
            //                  minDiv.innerHTML = target.innerHTML;
            //两者样式交换，引入第三变量tmpInnerHTMl
            var tmpInnerHTMl = minDiv.innerHTML;
            minDiv.innerHTML = itemName.innerHTML;
            itemName.innerHTML = tmpInnerHTMl;
            //引入第三变量tmpColor
            var tmpColor = getComputedStyle(minDiv).backgroundColor;
            minDiv.style.backgroundColor =
              getComputedStyle(itemName).backgroundColor;
            itemName.style.backgroundColor = tmpColor;
            //删掉克隆元素
            content.removeChild(cloneDiv);
            document.onmouseup = null; //把鼠标松开后的操作清除
          };
          return false;
        };
      }
      //for循环使每一个item都调用itemBox()这个函数
      for (var i = 0; i < items.length; i++) {
        itemBox(items[i]);
      }
      function distance(div1, div2) {
        //勾股定理 记录 两个元素的距离
        var a = div1.offsetLeft - div2.offsetLeft;
        var b = div1.offsetTop - div2.offsetTop;
        var c = Math.sqrt(a * a + b * b); //利用勾股定理算出两个div的距离     a^2 + b^2 再开平方得出c
        return c;
      }
    </script>
  </body>
</html>

各位直接CV，效果绝对实现