js实现九宫格

深碍√TFBOYSˉ_ 2022-03-17 14:17 558阅读 0赞

一、js实现九宫格简单分为三大步，具体看代码块注释  
1.让每个li能够实现拖拽功能  
a).css布局用一个ul,九个li  
b).获取所有li,循环给每个li绑定onmousedown事件  
c).给ul添加onmousemove和onmouseup事件  
2.交换两个li  
交换源li和目标li的backgroundPosition  
3.归位  
让源li归为  
二、示例图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70]

<!doctype html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>九宫格</title>
    	<style type="text/css">
    		*{
    			margin:0; 
    			padding:0;
    		}
    		#ulId{
    			width:600px;
    			height:600px;
    			border:1px solid black;
    			position:relative;
    			margin:100px auto;
    			list-style:none;
    		}
    		#ulId li{
    			width:200px;
    			height:200px;
    			position:absolute;
    			border:1px solid black;
    			box-sizing:border-box;
    			background:url(img/1.jpg);
    			background-size:600px 600px;
    		}
    		#ulId li:nth-child(1){
    			left:0px;
    			top:0px;
    			background-position:0px 0px;
    		}
    		#ulId li:nth-child(2){
    			left:200px;
    			top:0px;
    			background-position:-200px 0px;
    		}
    		#ulId li:nth-child(3){
    			left:400px;
    			top:0px;
    			background-position:-400px 0px;
    		}
    		#ulId li:nth-child(4){
    			left:0px;
    			top:200px;
    			background-position:0px -200px;
    		}
    		#ulId li:nth-child(5){
    			left:200px;
    			top:200px;
    			background-position:-200px -200px;
    		}
    		#ulId li:nth-child(6){
    			left:400px;
    			top:200px;
    			background-position:-400px -200px;
    		}
    		#ulId li:nth-child(7){
    			left:0px;
    			top:400px;
    			background-position:0px -400px;
    		}
    		#ulId li:nth-child(8){
    			left:200px;
    			top:400px;
    			background-position:-200px -400px;
    		}
    		#ulId li:nth-child(9){
    			left:400px;
    			top:400px;
    			background-position:-400px -400px;
    		}
    	</style>
    </head>
    <body>
    	<ul id="ulId">
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    	</ul>
    </body>
    </html>
    <script type="text/javascript">
    	function $(id){
    		return document.getElementById(id);
    	}
    	var currIndex=-1;//表示当前按下的li的下标
    	var targetIndex=-1;//表示目标li的下标
    	window.function(){
    		//一、让每个li能够实现拖拽功能
    		//1.获取所有li
    		var lis=$("ulId").children;
    		//2.循环给每个li绑定onmousedown事件
    		for(var i=0;i<lis.length;i++){
    			//给每个li设置自定义属性
    			lis[i].setAttribute("index",i)
    			lis[i].onmousedown=function(event){
    				var evt=event || window.event;
    				//3.偏移 记录鼠标按下时距离事件源的位置
    				var offsetX=evt.offsetX;
    				var offsetY=evt.offsetY;
    				currIndex=this.getAttribute("index");
    				this.style.zIndex=1;
    				//4.给ul添加onmousemove事件，鼠标在ul里面移动
    				$("ulId").onmousemove=function(event){
    				var evt=event || window.event;
    				//5、计算li距离ul的left和top   ...的X(Y)针对的是事件的属性，...left(top)针对的是dom元素的属性
    				//鼠标距离ul的位置
    				var mouseX=evt.pageX-$("ulId").offsetLeft;
    				var mouseY=evt.pageY-$("ulId").offsetTop;
    				//li距离ul的位置
    				var left1=mouseX-offsetX;
    				var top1=mouseY-offsetY;
    				//给外观赋值
    				lis[currIndex].style.left=left1+"px";
    				lis[currIndex].style.top=top1+"px";
    
    				//计算目标li的位置
    				var colsIndex=parseInt(mouseX/200); //列下标
    				var rowsIndex=parseInt(mouseY/200); //行下标
    				targetIndex=rowsIndex*3+colsIndex;//目标li的下标
    				}
    			}
    			//6.给ul添加onmouseup事件
    			$("ulId").onmouseup=function(){
    				$("ulId").onmousemove=null;
    				lis[currIndex].style.zIndex=0;
    				changeLi(currIndex,targetIndex);
    				currIndex=-1;
    				targetIndex=-1;
    			}
    		}
    
    	}
    	function changeLi(sourIndex,tagIndex){
    		//二、交换两个li
    		if(sourIndex==-1 || tagIndex==-1){
    			return;
    		}
    		var lis=$("ulId").children;
    		if(sourIndex!=tagIndex){
    			
    			var temp=getStyle(lis[sourIndex],"backgroundPosition");
    			lis[sourIndex].style.backgroundPosition=getStyle(lis[tagIndex],"backgroundPosition");
    			lis[tagIndex].style.backgroundPosition=temp;
    		}
    		
    		//三、归位
    		var colsIndex=sourIndex%3; 
    		var rowsIndex=parseInt(sourIndex/3); 
    		lis[sourIndex].style.left=colsIndex*200+"px";
    		lis[sourIndex].style.top=rowsIndex*200+"px";
    	}
    //获取dom对象的样式属性
    //参数：
    // dom对象
    // 样式属性名
    
    //返回值：样式属性值
    
    function getStyle(domObj,attr) {
    	if(domObj.currentStyle){//如果能够获取到currentStyle
    		return domObj.currentStyle[attr];
    	}else{
    		return window.getComputedStyle(domObj)[attr];
    	}
    }
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70]: /images/20220317/f7291bf38a9345d1ad14558d7d95db65.png