js案例--九宫格

自己理解着写的，仅供参考。

	</div>
	<script type="text/javascript">
		//创建九个div
		var oWrap = document.getElementById("wrap");
		var mt = ml = 10;
		for(var i = 0; i < 3; i++){
			for(var j = 0; j < 3; j++){
				var oDiv = document.createElement("div");
				oWrap.appendChild(oDiv);
				//console.log(oDiv)
				//定位
				oDiv.style.top = i*(oDiv.offsetHeight+mt) + "px";
				oDiv.style.left = j*(oDiv.offsetWidth+ml) + "px";
				oDiv.style.background = "rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")";
			}
		}
		//向div里放置文本
		var txts = ["A","B","C","D","E","F","G","H","I"];
		var aItems = oWrap.children;
		for(var i = 0; i < aItems.length; i++){
			aItems[i].innerText = txts[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;
				//将this保存current中 ，因为上下指向的this不同
				var dragItem = this;
				 //因为拖动的时候原位置，还需要有东西，所以才克隆
				var cloneNode = dragItem.cloneNode();
				//克隆一个当前的元素，并添加到盒子里
				 //用克隆的节点替换当前节点
				oWrap.replaceChild(cloneNode,dragItem);
				//因为添加之后克隆的索引在最后，

// 后面需要进行距离比较，所以需要将克隆节点和当前节点进行替换
//把当前节点加到盒子里
oWrap.appendChild(dragItem);
cloneNode.style.border = “1px dashed #cecece”;
dragItem.style.zIndex = 1;

				document.onmousemove = function(e){
					var evt = e || event;
					var _left = evt.clientX - x - oWrap.offsetLeft;
					var _top = evt.clientY - y - oWrap.offsetTop;
					//当前对象的坐标：随着鼠标移动
					dragItem.style.left = _left + "px";
					dragItem.style.top = _top + "px";
					//取消默认行为
					return false;
				}
				
				document.onmouseup = function(){
				 //将当前的这个和剩下所有的进行比较，找出距离最近的
            //将当前放到距离最近的位置，最近的那个放到克隆的位置
					document.onmousemove = null;
					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);
					}
					//排序后，数组会发生改变
					disArr.sort(function(a,b){
						return a-b;
					})
					//取最小值对应的索引
					var minVal = disArr[0];
					var minIndex = newArr.indexOf(minVal);
					
					//交换位置：当前的坐标为最小距离对应的位置，最小值的放在克隆所在的位置
					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.onmouseup = null;
				}
				return false;
				
			}
		}
		
		
		
	</script>
</body>