用处不知道会有多大，做出来先备着（需引JQ）。div移动借鉴过园内某大大代码，就此感谢。
在线demo：http://jsfiddle.net/seazeg/n3HGT/embedded/result/
HTML：
<body> <div style=" 100%; height: 100%; margin: 0 auto;" id="main"> <div id="one"> <img src="img2/1.jpg" /> </div> <div id="two"> <img src="img2/2.jpg" /> </div> <div id="three"> <img src="img2/3.jpg" /> </div> <div id="four"> <img src="img2/4.jpg" /> </div> <div id="five"> <img src="img2/1.jpg" /> </div> <div id="six"> <img src="img2/2.jpg" /> </div> <div id="seven"> <img src="img2/3.jpg" /> </div> <div id="eight"> <img src="img2/4.jpg" /> </div> <input id="btn" type="button" value="打乱" style="float: left; margin: 210px 0 0 100px; z-index: 200; position: absolute; 100px; height: 50px;" /> <input id="btn2" type="button" value="整理" style="float: left; margin: 210px 0 0 0px; z-index: 200; position: absolute; 100px; height: 50px;" /> </div> </body>
css：
<style type="text/css"> body { margin: 0; padding: 0; } #main div { height: 200px; width: 200px; border: 2px solid #999; position: absolute; } .pointer { cursor: pointer; } .on { box-shadow: 0 0 10px #111; cursor: move; } .off { box-shadow: 0 0 0 0; cursor: pointer; } </style>
JS代码：
<script type="text/javascript"> $(function () { $("#btn").click(function () {//无序 var len = $("#main div").length; for (var i = 0; i < len; i++) { $("#main div").eq(i).css("top", Math.random() * 75 + "%"); $("#main div").eq(i).css("left", Math.random() * 80 + "%"); } }); $("#btn2").click(function () {//有序 var len = $("#main div").length; for (var i = 0; i < len; i++) { $("#main div").eq(i).css("top", "0"); $("#main div").eq(i).css("left", "0"); } }); $("#main div").mouseover(function () { var divid = $(this).attr("id"); //获取当前div的id var odiv = document.getElementById(divid); //得到当前div $(this).css("z-index", "100").siblings().css("z-index", "0"); //div层叠顺序 $(this).addClass("pointer"); //初始化指针样式 moveDiv(odiv); }); function moveDiv(obj) { obj.onmousedown = function (e) {//鼠标按下事件 var oe = e || window.event; var $this = this; var startX = oe.clientX - $this.offsetLeft; var startY = oe.clientY - $this.offsetTop; obj.className = "on"; //css3阴影样式添加 document.onmousemove = function (e) {//鼠标移动事件 var oe = e || window.event; $this.style.left = oe.clientX - startX + "px"; $this.style.top = oe.clientY - startY + "px"; } document.onmouseup = function () {//鼠标松开事件 document.onmousemove = null; document.onmouseup = null; obj.className = "off"; //css3阴影样式去除 if ($this.releaseCapture) {//debug释放鼠标捕获 $this.releaseCapture(); } } if ($this.setCapture) {//debug设置鼠标捕获 $this.setCapture(); } return false; } } }); </script>