九宫格拖拽改变位置

css

body{
	padding: 0;
	margin: 0;
}
#wrap{
	position: relative;
}
#wrap>div{
	position: absolute;
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	font-size: 50px;
	border-radius: 10px;
}

html

<div id="wrap">
			
		</div>

js

//创建结构
var oWrap = document.getElementById("wrap");
var mt = ml = 10;
//三行三列
for(var i = 0; i < 3; i++){//hang
	for(var j = 0; j < 3; j++){//lie
		var oDiv = document.createElement("div");
		oWrap.appendChild(oDiv);
		oDiv.style.left = j*(oDiv.offsetWidth+ml)+"px";
		oDiv.style.top = i*(oDiv.offsetHeight+mt)+"px";
		//设置随机颜色
		oDiv.style.background = "rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")";
	}
}
//向单元格中填入字符
var arr = ["A","B","C","D","E","F","G","H","I"];
var aItems = oWrap.children;
for(var i = 0; i < aItems.length; i++){
	aItems[i].innerText = arr[i];
}


//拖拽

for(var i = 0; i < aItems.length; i++){
	aItems[i].onmousedown = function(e){
		var evt = e || event;
		var x = evt.offsetX;
		var y = evt.offsetY;
		
		//循环结束后，i值发生了变化
		var dragItem = this;
		
		//克隆节点
		var cloneNode = dragItem.cloneNode();
		cloneNode.style.border = "1px dashed #cecece";
		
		//DOM结构顺序上的位置交换 这个代码可以先不看，正常在后续的处理过程中，才考虑到
		
		oWrap.replaceChild(cloneNode,dragItem)
		
		//将拖拽节点放到wrap里
		oWrap.appendChild(dragItem);
		//让拖拽对象的层级提升上来
		dragItem.style.zIndex = 1;
		
		
		document.onmousemove = function(e){
			var evt = e || event;
			var _left = evt.clientX - x;
			var _top = evt.clientY - y;
			
			//去改变拖拽对象的样式，获取这个对象时，既不能用this，也不能用aItems[i]
			//不能用this的原因：this在这里指向document
			//不能用aItems[i],循环结束后，i值发生了变化
			dragItem.style.left = _left + "px";
			dragItem.style.top = _top + "px";
			
			
			return false;
		}
		
		document.onmouseup = function(){
			var disArr = [];//保存退拽对象和单元格的距离
			var newArr = [];
			//交换位置
			
			for(var j = 0; j < aItems.length-1; j++){
				var disx = dragItem.offsetLeft - aItems[j].offsetLeft;
				var disy = dragItem.offsetTop - aItems[j].offsetTop;
				var dis = Math.sqrt(Math.pow(disx,2)+Math.pow(disy,2));
				disArr.push(dis);
				newArr.push(dis);
			}
			//console.log(disArr);
			//找数组中的最小值，以及最小值对应的索引
			disArr.sort(function(a,b){
				return a-b;
			})
			
			var minVal = disArr[0];
			var minIndex = newArr.indexOf(minVal);
			
			//console.log(minIndex);
			
			//交换位置
			dragItem.style.left = aItems[minIndex].style.left;
			dragItem.style.top = aItems[minIndex].style.top;
			
			aItems[minIndex].style.left = cloneNode.style.left;
			aItems[minIndex].style.top = cloneNode.style.top;
			
			oWrap.removeChild(cloneNode);
			
			
			
			
			
			document.onmousemove = null;
			document.onmouseup = null;
		}
		
		
		return false;
	}
}