本篇内容介绍了“原生JS怎么生成九宫格”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
解题思路
涉及知识点，请
熟练利用js做出html样式
2、对onmousedown,onmousemove,onmouseup等事件熟练组合运用
3、熟练掌握事件对象domobj.offsetLeft,domobj.offsetTop,domobj.offsetWidth，domobj.offsetHeight的知识点
4、了解事件 e.clientX,e.clientY,e.offsetX,e.offsetY,e.pageX,e.pageY的知识点
5、理解克隆节点的原理
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { margin: 0; padding: 0; } #wrap { position: relative; } #wrap div { width: 100px; height: 100px; position: absolute; text-align: center; line-height: 100px; font-size: 50px; } </style></head><body> <div id="wrap"> </div> <script> // 1.获取warp var wrap = document.querySelector('#wrap') //2.创建3行3列9个div。并且给每个div添加随机颜色 //以下为表示构建思路，利用双重for循环 //(0,0) (110,0) (220,0) //(0,110)(110,110)(220,110) //(0,220)(110,220)(220,220) var count = 0 var chart = [1, 2, 3, 4, 5, 6, 7, 8, 9] for (var i = 0; i < 3; i++) {//行 for (var j = 0; j < 3; j++) {//列 var odiv = document.createElement('div'); wrap.appendChild(odiv); //设置top和left值，注意行对应的是odiv.offsetHeight，列对应的是odiv.offsetWidth odiv.style.top = i * (odiv.offsetHeight + 10) + 'px'; odiv.style.left = j * (odiv.offsetWidth + 10) + 'px'; //获取随机颜色，用的rgb随机获取方式 odiv.style.backgroundColor = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ','+ Math.floor(Math.random() * 256) + ')'; //给每个图片标上号码，i,j最大值为3，但是共执行了9次，设置变量count=0,count++作为数组的索引把对应的内容添加到div上 odiv.innerText = chart[count++]; } } //3.获取循环中创建的9个div,并添加点击鼠标事件 var items = wrap.children for (var i = 0; i < items.length; i++) { items[i].onmousedown = function (e) { var evt = e || event; //获取鼠标点下相对于事件源的偏移量 var x = evt.offsetX; var y = evt.offsetY; //this指向鼠标点击要拖拽的对象 var dragitem = this; //克隆点击拖拽的对象。注意此时解释可能有点抽象，但是解题关键，克隆对象后相当于除了上述9个事件， //又生成了一个隐藏的和点击的div相同的对象，把克隆的对象替换掉刚点击时的即将拖拽的对象，此时拖 //拽对象被隐藏，脱离父元素，此时需要把拖拽的对象添加到父元素的最后，使其重新为10个子元素，否则拖拽的元素无法显示。 var clonenode = dragitem.cloneNode(); wrap.replaceChild(clonenode, dragitem); //把拖拽的节点放到wrap的最后 wrap.appendChild(dragitem); //拖拽时把拖拽的层次向上调一下，否则会被覆盖。 dragitem.style.zIndex = 1; //4，此时鼠标点击时需要准备的工作已经做完了，因为拖拽鼠标时，拖拽对象时再文档上移动的，此时鼠标移动的对象应为document document.onmousemove = function (e) { var evt = e || event; //获取拖拽对象跟随鼠标时在文档中的定位，事件源据文档的边距-点击时距离事件源的偏移=定位的坐标 var x1 = evt.clientX - x; var y1 = evt.clientY - y; dragitem.style.left = x1 + 'px'; dragitem.style.top = y1 + 'px'; //取消默认行为 return false;v } //5，有拖拽对象的定位，此时需要判断鼠标松开时距离哪个创建的哪个div距离最近，交换其距离。上面提到，此时共创建了10个Div, //分别求出拖拽对象和其他10个div的距离传到数组中，找出最小值对应的索引，该索引对应的div即为距离最近的div,然后交换两者的 //位置（注意：观察数组，最后一个为0，且上面已经把拖拽对象放到最后，是自己和自己比，因此循环时减一即可忽略和自己的比较） document.onmouseup = function () { var arr = []; //循环长度-1，忽略和自己的比较 for (var j = 0; j < items.length - 1; j++) { //利用勾股定理求距离，并传入数组 var disx = dragitem.offsetLeft - items[j].offsetLeft; var disy = dragitem.offsetTop - items[j].offsetTop; var dissum = Math.sqrt(Math.pow(disx, 2) + Math.pow(disy, 2)) arr.push(dissum); } //利用展开符...展开数组，用Math.min找出最小值，再用最小值去找出数组对应索引 var min = Math.min(...arr); var dex = arr.indexOf(min); //把拖拽对象的定位换成距离最近div的距离 dragitem.style.left = items[dex].style.left; dragitem.style.top = items[dex].style.top; //然后把距离最近的div的定位换成此时克隆对象的定位（即原拖拽对象的定位） items[dex].style.left = clonenode.style.left; items[dex].style.top = clonenode.style.top; //此时交换完毕，把克隆节点移除 wrap.removeChild(clonenode) //移除事件并取消默认行为 document.onmousemove = ''; document.onmouseup = ''; return false; } } } </script></body></html>“原生JS怎么生成九宫格”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
