拖拽九宫格案例

最新推荐文章于 2024-12-27 19:27:26 发布

岁月如歌_

最新推荐文章于 2024-12-27 19:27:26 发布

阅读量292

点赞数 1

分类专栏： javascript jquery

本文链接：https://blog.youkuaiyun.com/namechenfl/article/details/105577458

版权

javascript 同时被 2 个专栏收录

24 篇文章

订阅专栏

jquery

6 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			#box{position:relative;margin: 100px;}
			#box div{
				position: absolute;width: 100px;height: 100px;border-radius: 10px;text-align: center;line-height: 100px;font-size: 32px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			
		</div>
		<script type="text/javascript">
			var Box = document.getElementById("box");
			var ml=mh=10;	
			for(var i=0;i<3;i++){
				for(var j=0;j<3;j++){
					var Div =document.createElement("div");
					Box.appendChild(Div);					
					Div.style.left=j*(Div.offsetWidth+mh)+"px";
					Div.style.top=i*(Div.offsetHeight+ml)+"px";
					Div.style.background="rgb("+
						Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
		      }
				var Odiv =Box.children;
			var arr=["李","源","哈","获","得","满","分","恭","喜"];
				for(var k=0;k<Odiv.length;k++){
					Odiv[k].innerHTML=arr[k];
			     }
			}
			for(var n=0;n<Odiv.length;n++){
				Odiv[n].onmousedown =function(e){
					var evt =e||event;					
					var x =evt.clientX-this.offsetLeft-Box.offsetLeft;
					var y =evt.clientY-this.offsetTop-Box.offsetTop;
					var curNode = this;
					var cloneNode =curNode.cloneNode();
					Box.replaceChild(cloneNode,curNode);
					curNode.style.zIndex=1;
					Box.appendChild(curNode);
					document.onmousemove=function(e){
						var evt =e ||event;
						curNode.style.left=evt.clientX-x-Box.offsetLeft+"px";
						curNode.style.top=evt.clientY-y-Box.offsetTop+"px";
						return false;
						
					}
				
				document.onmouseup=function(){
					document.onmousemove=null;
				
			    	 var arr1=[];
					 var arr2=[];
					 for(var i=0;i<Odiv.length-1;i++){
					 	var dx=curNode.offsetLeft-Odiv[i].offsetLeft;
					 	var dy=curNode.offsetTop-Odiv[i].offsetTop;
					 	var dz=Math.sqrt(Math.pow(dx,2)+Math.pow(dy,2));
					 	arr1.push(dz);
					 	arr2.push(dz);
					 
					 }
					 arr1.sort(function(a,b){
					 	return a-b;
					 })
				
					 var minval =arr1[0];
					 var minindex =arr2.indexOf(minval);
					  
					 curNode.style.left=Odiv[minindex].style.left;
					 curNode.style.top=Odiv[minindex].style.top;
					 Odiv[minindex].style.left=cloneNode.style.left;
					 Odiv[minindex].style.top=cloneNode.style.top;
					 
					 Box.removeChild(cloneNode);
					 document.onmouseup=null;
				}
				
			}
			
		}	
			
			
			
		</script>
	</body>
</html>