原生JS生成九宫格
作者：犹如幻翳！
这篇文章主要为大家详细介绍了原生JS生成九宫格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生JS生成九宫格图片并且实现图片互换，供大家参考，具体内容如下
解题思路
涉及知识点，请
1、熟练利用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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。