源生JS写九宫格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 36px;
				color: #fff;
				cursor: pointer;
				position: absolute;
				width: 120px;
				height: 120px;
				border-radius: 20px;
			}
			#wrap{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				position:relative;
			}
		</style>
	</head>
	<body>
		<!--九宫格-->
		<div id="wrap"></div>
		<script>
		var outer=document.getElementById("wrap");		
		var mg_top=10;
		var mg_left=10;
		for(var i=0;i<3;i++){//九宫格行数
			for(var j=0;j<3;j++){//九宫格列数
				var str = "1234567890abcdefABCDEF";//产生随机颜色
				var diffColor = "#";
				for(var k=0;k<6;k++){
					var diffnum = Math.floor(Math.random()*12);
					diffColor += str[diffnum];
				}
				var oDiv=document.createElement("div");//创建div元素
				outer.appendChild(oDiv);
				oDiv.style.background = diffColor;
				oDiv.style.top = i*(oDiv.offsetHeight+mg_top)+"px";//每行div的定位top值
				oDiv.style.left = j*(oDiv.offsetWidth+mg_left)+"px";//每列div的定位left值
			}
		}
		//向每个div中添加序号
		var str2 = "ABCDEFGHI";
		var mDiv = outer.getElementsByTagName("div");
		for(var m=0;m<str2.length;m++){
			mDiv[m].innerHTML = str2[m];
		}
		
		for(var n=0;n<mDiv.length;n++){
			mDiv[n].onmousedown = function(e){
				var evt = e || event;
				//克隆节点
				//用克隆的把原来的替换掉，再把替换掉的加到外层父级div中，防止div消失
				var movenum = this;
				var clone = movenum.cloneNode();
				outer.replaceChild(clone,movenum);
				outer.appendChild(movenum);
				
				//获取事件对象位置
				var mouse_left = evt.offsetX;
				var mouse_top = evt.offsetY;
				document.onmousemove = function(e){
					var evt = e || event;
					//避免移动块div会以左上角为移动点使left值和top值变大
					var x = evt.clientX-mouse_left;
					var y = evt.clientY-mouse_top;					
					movenum.style.left = x+"px";
					movenum.style.top = y+"px";
				}
				document.onmouseup = function(){
					document.onmousemove = null;					
					
					//替换位置
					//两个数组，都存放移动块距离每个固定块的距离，然后一个从小到大排序，获取数组0位置是最小值，然后用indexOf在没有排序的数组中找到这个距离是与那个固定div之间的
					var arr1 = [];
					var arr2 = [];
					for(var d=0;d<mDiv.length-1;d++){
						var disX = mDiv[d].offsetLeft-movenum.offsetLeft;
						var disY = mDiv[d].offsetTop-movenum.offsetTop;
						var distance = Math.sqrt(Math.pow(disX,2)+Math.pow(disY,2));
						arr1.push(distance);
						arr2.push(distance);
					}
					
					//距离从小到大排序
					arr1.sort(function(a,b){
						return a-b;
					})
					
					//得到最小距离后在未经过排序的arr2中找这个距离对应的索引值，就能找到距离移动块距离最小的那个div
					var minDis = arr1[0];
					var minIndex = arr2.indexOf(minDis);
					
					//将距离移动块距离小的div的left和top给移动块，移动块占据这个div的位置
					//移动块占据div块位置后，把克隆的移动块的位置给被占据位置的div
					movenum.style.left = mDiv[minIndex].style.left;
                    movenum.style.top = mDiv[minIndex].style.top;
                    mDiv[minIndex].style.left = clone.style.left;
                    mDiv[minIndex].style.top = clone.style.top;
          			
          			//把克隆块删除，结束鼠标松开事件
                   	outer.removeChild(clone);
                   	document.onmouseup = null;
			    }
			}
		}
	</script>
	</body>	
</html>
猜你喜欢
