极乐门资源网

原生js实现九宫格拖拽换位
网络编程 2024/11/18 佚名
2 0
极乐门资源网 Design By www.ioogu.com

使用原生JS写出一个九宫格，实现九个格子何以拖拽换位的效果，供大家参考，具体内容如下

效果演示

原生js实现九宫格拖拽换位

具体思路分析和代码：

图解1：

原生js实现九宫格拖拽换位

代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <!-- 
  思路梳理：
   1，样式设置：在样式里最好使用定位来布局，不然以后拖拽代码会麻烦点儿。
    （这里没有设置父容器的具体位置，如果设置了父容器的具体位置，则在移动
    时top和left的值需要根据情况计算位置）
   2，父容器盒子里的内容最好使用js代码来生成，方便使用和添加样式
    2-1：（循环生成子元素）
     我们子元素使用的定位布局，不难发现：每行的top值一样，每列的left值一样，因此循环生
     成子元素我们可以使用3*3的循环嵌套来写，这样就可以讲每行的样式设置了。
    2-2：（给循环生成的标签添加随机颜色和文字）
     随机颜色我是用的时rgb()来实现的，文字可以使用ASCII码来生成，也可以使用字符串拼接
     来生成，我这里使用ASCII码生成。
    PS：这样我们的基本样式就设置完毕了，接下来就是设置拖拽的事件
   3，给每一个元素添加事件，这里我们需要三个事件： onmousedown - onmousemove - onmouseup
    3-1：（首先是按下事件 onmousedown）
     当我们在对应子元素按下时，我们要获取鼠标到按下目标边框线内的距离，并且克隆这个元素，
     将这个元素扔到父容器里面充当占位，（这里注意，克隆的这个节点在HTML结构里是放到最后
     的，如果不处理后面会出BUG！！！）。
    3-2：（然后处理移动事件 onmousemove）
     在按下子元素块儿并且移动时，我们要给目标设置他的top和left值，来实现跟随移动，所以
     我们需要获取鼠标到可视窗口的距离，目标的top和left值 = 鼠标到可视窗口的距离 - 鼠标
     到目标边缘的距离（这里无边框，如果有需要额外减去边框宽度）。
     PS： 
      这里存在一个BUG！！！！在拖拽时，存在一个默认事件--选中文字，当你松开之后，目
      标还会跟着走，就算你关闭了onmousemove这个事件。所以这里需要阻止一下默认事件。
    3-3：（最后处理抬起事件 onmouseup）这里也是最重要的一步！！！！
     核心思想：
       当鼠标抬起时，我们要计算当前移动目标的中心点和每一个子元素中心点的距离，
       哪一个离得最近，和哪个交换位置（注意，这里存在一个BUG，这里的BUG就是
        3-1 里提到的BUG，需要提前处理）。
     具体过程：
      3-3-1：
       首先我们要进行循环，计算拖拽目标的中心点与每一个子元素的中心点的距离，具体
       参照 图解1 。 （拖拽目标距离可视窗口的左边距 - 子元素距离可视窗口的左边
       距）平方 + （拖拽目标距离可视窗口的上边距 - 子元素距离可视窗口的上边距）
       平方。最后在开方，得到中心点的距离（注意3-1的BUG要处理掉，把，要把移动的
       标签放到结构的最后，然后循环的时候将他排除掉，不然每次距离最近的都是它本身）。
      3-3-2：
       我们循环会得到我们想要的每一个距离，然后将这些距离放到一个数组里，并且再定
       义一个数组备份一下，方便对照具体是哪个标签。
       将其中一个数组进行排序，然后再备份数组中查一下最小的值在备份数组中的索引下
       标，这个索引下标也就是对应的子元素了。
      3-3-3：
       然后将距离最近的子元素的 left和top值给 目标元素
       然后将克隆的标签的 left和top值给 距离最近的子元素
       最后在将克隆的标签移除掉

       这里还是会有一个BUG！！！如果不在标签上按 直接抬起鼠标的话，会报错，这是因
       为直接执行了onmouseup事件，所以需要移除掉onmouseup事件 
  -->
  <style>
  *{margin: 0;padding: 0;}
  .father{position: relative;}
  .father div{position: absolute;width: 100px;height: 100px;border-radius: 10px;text-align: center;line-height: 100px;font-size: 30px;cursor: pointer;}
  </style>
</head>
<body>
 <div class="father"></div>
 <script>
  // 3*3 循环生成子元素div,并给他们设置定位值
  // 设定固定的margin值
  var mT = 15;
  var mL = 15;
  var asc = 65;//ASCII码值
  var oFather = document.querySelector('.father');
  for(var i = 0; i < 3; i++){
   for(var j = 0; j < 3; j++){
    var oDiv = document.createElement('div');//创建子元素
    oFather.appendChild(oDiv);
    oDiv.style.left = j * (oDiv.offsetWidth + mL) +'px';
    oDiv.style.top = i * (oDiv.offsetHeight + mT) +'px';
    // 随机颜色设置
    oDiv.style.background = 'rgb('+parseInt(Math.random()*256) + "," +parseInt(Math.random()*256) + ","+parseInt(Math.random()*256)+')';
    // 加上字母
    oDiv.innerText = String.fromCharCode(asc++);
   }
  }
  // 为了方便理解，将事件写到了外面，这里可以生成标签循环内部
  /* var oItem = document.querySelectorAll('.father>div');
  这种方式获取的是静态集合，只会获取到初次页面加载的内容，用这种办法获取子元素会出BUG */
  var oItem = oFather.children;
  for(var k = 0 ;k<oItem.length; k++){
   oItem[k].onmousedown = function(e){
    var evt = e || event;
    // 获取鼠标到目标边框内的距离
    var x = e.offsetX;
    var y = e.offsetY;
    var tagNode = this;
    // 克隆目标标签
    var cloneNode = tagNode.cloneNode();
    cloneNode.style.border = '1px dashed #fff';
    oFather.appendChild(cloneNode);
    tagNode.style.zIndex = 1;
    // 在思路里提到过，这里存在一个BUG需要将克隆的和被拖拽换位置
    oFather.replaceChild(cloneNode, tagNode);
    oFather.appendChild(tagNode);
    document.onmousemove = function(e){
     var evt = e || event ; 
     var l = evt.clientX - x;
     var t = evt.clientY - y;
     tagNode.style.left = l + 'px';
     tagNode.style.top = t + 'px';
     // 阻止默认事件，防止bug
     return false;
    }
    document.onmouseup = function(){
     // 抬起鼠标后，要判断离那个最近，然后交换
     
     var oldArr = [];
     var newArr = [];
     for(var l = 0; l<oItem.length - 1;l++){
      var disX = tagNode.offsetLeft - oItem[l].offsetLeft;
      var disY = tagNode.offsetTop - oItem[l].offsetTop;
      // 勾股定理
      var dis = Math.sqrt( Math.pow(disX,2) + Math.pow(disY,2) );
      oldArr.push(dis);
      newArr.push(dis);
     }
     // 将oldArr从小到大排序
     oldArr.sort(function(a,b){return a-b});
     var minIndex = newArr.indexOf(oldArr[0]);

     console.log('oldArr' , oldArr, 'newArr' ,newArr);

     // 将距离最近的元素的定位给移动的目标
     tagNode.style.top = oItem[minIndex].style.top;
     tagNode.style.left = oItem[minIndex].style.left;
     // 把克隆的定位给距离最近的
     oItem[minIndex].style.top = cloneNode.style.top;
     oItem[minIndex].style.left = cloneNode.style.left;

     //把克隆节点移除
     oFather.removeChild(cloneNode);

     document.onmousemove = null;
     document.onmouseup = null;
    }
    return false;
   }
  }
 </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

标签：
js九宫格拖拽换位,js九宫格拖拽,js拖拽换位
极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“原生js实现九宫格拖拽换位”

暂无原生js实现九宫格拖拽换位的评论...
www.ioogu.com 极乐门资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
极乐门资源网 Design By www.ioogu.com