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


Posted in Javascript onJanuary 26, 2021

使用原生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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 滑动效果(Slide)
Sep 15 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
JS实现一个列表中包含上移下移删除等功能
Sep 24 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
JointJS流程图的绘制方法
Dec 03 Javascript
js实现3D照片墙效果
Oct 28 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 Javascript
小程序实现列表倒计时功能
Jan 29 Javascript
原生JS实现音乐播放器
Jan 26 #Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 #Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 #Javascript
js中实现继承的五种方法
Jan 25 #Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 #Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 #Vue.js
javascript实现点击产生随机图形
Jan 25 #Javascript
You might like
PHP简单选择排序算法实例
2015/01/26 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
从vue源码看props的用法
2019/01/09 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
python 获取et和excel的版本号
2009/04/09 Python
Python3基础之基本运算符概述
2014/08/13 Python
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
Python中方法链的使用方法
2016/02/23 Python
Python类属性的延迟计算
2016/10/22 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
django序列化serializers过程解析
2019/12/14 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
Python sep参数使用方法详解
2020/02/12 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
高中自我鉴定范文
2013/11/03 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
促销活动总结模板
2014/07/01 职场文书
工程安全生产协议书
2014/11/21 职场文书