1、本文的九宫格是用原生的js实现的；

2、实现的九宫格效果是：可交换1-9的任意方格，且将方格拖拽至大盒子外松开后可自动回到拖拽之前的位置。

3、代码如下：

html代码：

<ul id="box">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>

css代码：

body,div,p,h1,h2,h3,h4,h5,h6,ol,ul,li,dl,dt,dd,th,tr,td,hr,caption,table,form,img,input,legend,fieldset{
	margin:0;
	padding:0;
}
html {
	overflow: hidden;
}
ul {
	list-style: none;
}
#box {
	position: relative;
	margin: 20px auto;
	width: 640px;
	height: 640px;
	border: 1px solid #eee;
}
#box li {
	position: absolute;
	width: 200px;
	height: 200px;
	line-height: 200px;
	text-align: center;
	font-size: 40px;
	font-weight: bold;
	background: #eee;
}
#box .active {
	z-index: 1;
	color: #fff;
	background: blue;
}

js代码：

window.onload = function () {
	var oBox = document.getElementById('box');
	var aLi  = oBox.children;

	for(var i = 0; i < aLi.length; i++) {
		// 布局
		aLi[i].style.left = 210 * (i % 3) + 10 + 'px';
		aLi[i].style.top  = 210 * Math.floor(i / 3) + 10 + 'px';

		// 添加拖拽功能
		aLi[i].index = i;
		aLi[i].onmousedown = function (ev) {
		        var e = ev || window.event;
		        var iX = e.clientX - this.offsetLeft;
		        var iY = e.clientY - this.offsetTop;
		        if(this.setCapture) {
			        this.setCapture();
		        }
		        var oThat = this;

			// 添加class名称
			this.className = 'active';
			document.onmousemove = function (ev) {
				var e = ev || window.event;
				var iL = e.clientX - iX;
				var iT = e.clientY - iY;

				oThat.style.left = iL + 'px';
				oThat.style.top  = iT + 'px';
 
				// 交换位置的条件
				for(var j = 0; j < aLi.length; j++) {
					if(oThat != aLi[j]
						&&  oThat.offsetLeft + oThat.offsetWidth > aLi[j].offsetLeft + aLi[j].offsetWidth / 2
						&&  oThat.offsetTop + oThat.offsetHeight > aLi[j].offsetTop + aLi[j].offsetHeight / 2
						&&  oThat.offsetLeft < aLi[j].offsetLeft + aLi[j].offsetWidth / 2
						&&  oThat.offsetTop < aLi[j].offsetTop + aLi[j].offsetHeight / 2) {
					    var iCurIndex = oThat.index;
					    // 交换位置
					    aLi[j].style.left = 210 * (iCurIndex % 3) + 10 + 'px';
					    aLi[j].style.top  = 210 * Math.floor(iCurIndex / 3) + 10 + 'px';

					    // 交换下标
					    oThat.index = aLi[j].index;
					    aLi[j].index = iCurIndex;
					    break;
					}
				}
			};
			document.onmouseup = function () {
				document.onmousemove = null;
				document.onmouseup = null;

				if(oThat.releaseCapture) {
					oThat.releaseCapture();
				}

				// 去掉class名称
				oThat.className = '';

				// 重置当前拖拽元素的位置
				oThat.style.left = 210 * (oThat.index % 3) + 10 + 'px';
				oThat.style.top  = 210 * Math.floor(oThat.index / 3) + 10 + 'px';
			};

			return false;
		};
	}
};