js实现九宫格

最新推荐文章于 2024-03-11 21:37:29 发布

路人甲小码

最新推荐文章于 2024-03-11 21:37:29 发布

阅读量3.1k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： JavaScript 前端

本文链接：https://blog.youkuaiyun.com/weixin_44111864/article/details/87908614

javascript 专栏收录该内容

20 篇文章

订阅专栏

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

<!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>