<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>九宫格</title> <style> *{ 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> function $(id){ return document.getElementById(id); } var currIndex=-1;//表示当前按下的li的下标 var targetIndex=-1;//表示目标li的下标
//一、让每个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>