<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>九宮格</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
width: 320px;
height: 320px;
position: relative;
left: 300px;
top: 100px;
border: 1px solid red;
}
li{
list-style: none;
position: absolute;
width: 100px;
text-align: center;
line-height: 100px;
font-size: 18px;
height: 100px;
user-select: none;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
var oUl=document.querySelector("ul");//獲取第一個ul的dom
var aLis=document.querySelectorAll("li");//獲取所有的li
var lt=mt=10;//margin左和margin右值
function RandColor(){
return Math.floor(Math.random()*256);//定義一個函數返回一個0-255之間的值
}
for(var i=0;i<aLis.length;i++){
aLis[i].style.left=(i%3)*(100+lt)+"px";//通過取余運算對列排列
aLis[i].style.top=Math.floor(i/3)*(100+mt)+"px";//通過向下取整進行行排列
aLis[i].style.backgroundColor="rgb("+RandColor()+","+RandColor()+","+RandColor()+")";//背景色
aLis[i].innerText=i+1;//li內的內容填充
aLis[i].onmousedown=function(e){//添加事件
var evt=e||event;
var dragNode=this;//把DOM對象(this)賦給dragNode,因為this指向問題,需要保存this
var cloneNode=dragNode.cloneNode();//克隆一個元素留在原地
dragNode.style.zIndex=2;//拖拽時置於頂部
dragNode.style.border="2px solid black";//突出樣式
oUl.replaceChild(cloneNode,dragNode);//把拖拽節點換成克隆節點
oUl.appendChild(dragNode);//把拖拽節點放到oUl尾部
var x=evt.offsetX;//鼠標在事件源的位置
var y=evt.offsetY;//鼠標在事件源的位置
document.onmousemove=function(e){
var evt=e||event;
var _x=evt.clientX-x-oUl.offsetLeft;//求坐標
var _y=evt.clientY-y-oUl.offsetTop;
_x=_x<0 ? 0 : _x>oUl.offsetWidth-100 ? oUl.offsetWidth-100 : _x;
_y=_y<0 ? 0 : _y>oUl.offsetHeight-100 ? oUl.offsetHeight-100 : _y;
dragNode.style.left=_x+"px";
dragNode.style.top=_y+"px";
}
document.onmouseup=function(){
var arr=[];//定義空數組用來存放dragNode每一個兄弟元素的坐標
aLis=oUl.children;
for(var i=0;i<aLis.length-1;i++){//開始存放
arr.push({left:aLis[i].offsetLeft,top:aLis[i].offsetTop})
}
var _x=dragNode.offsetLeft;
var _y=dragNode.offsetTop;
var resurt=[];//定義一個空的結果數組
var num=Infinity;//定義一個值用來保存結果的最小值
arr.forEach(function(item){
resurt.push(Math.sqrt(Math.pow(Math.abs(_x-item.left),2)+Math.pow(Math.abs(_y-item.top),2)));
if(num>Math.sqrt(Math.pow(Math.abs(_x-item.left),2)+Math.pow(Math.abs(_y-item.top),2))){
num=Math.sqrt(Math.pow(Math.abs(_x-item.left),2)+Math.pow(Math.abs(_y-item.top),2));
}
})
num=resurt.indexOf(num);//把resurt數組中的最小值的索引賦給num
//交換位置
dragNode.style.left=aLis[num].style.left;
dragNode.style.top=aLis[num].style.top;
aLis[num].style.left=cloneNode.style.left;
aLis[num].style.top=cloneNode.style.top;
//回置樣式
dragNode.style.zIndex=1;
dragNode.style.border="none";
oUl.removeChild(cloneNode);
document.onmouseup=null;
document.onmousemove=null;
}
}
}
</script>
</body>
</html>
