小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的360导航页图标拖动排序效果代码如下
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>图标拖动排序效果代码</title> <script src="js/jq.js"></script> <script> $(function() { function pointer(x, y) { this.x = x ; this.y = y ; } function position(left, top) { this.left = left ; this.top = top ; } $(.item_content .item).each(function(i) { this.init = function() { // 初始化 this.box = $(this).parent() ; $(this).attr(index, i).css({ position : absolute, left : this.box.offset().left, top : this.box.offset().top }).appendto(.item_content) ; this.drag() ; }, this.move = function(callback) { // 移动 $(this).stop(true).animate({ left : this.box.offset().left, top : this.box.offset().top }, 500, function() { if(callback) { callback.call(this) ; } }) ; }, this.collisioncheck = function() { var currentitem = this ; var direction = null ; $(this).siblings(.item).each(function() { if( currentitem.pointer.x > this.box.offset().left && currentitem.pointer.y > this.box.offset().top && (currentitem.pointer.x < this.box.offset().left + this.box.width()) && (currentitem.pointer.y < this.box.offset().top + this.box.height()) ) { // 返回对象和方向 if(currentitem.box.offset().top < this.box.offset().top) { direction = "down" ; } else if(currentitem.box.offset().top > this.box.offset().top) { direction = up ; } else { direction = normal ; } this.swap(currentitem, direction) ; } }) ; }, this.swap = function(currentitem, direction) { // 交换位置 if(this.moveing) return false ; var directions = { normal : function() { var savebox = this.box ; this.box = currentitem.box ; currentitem.box = savebox ; this.move() ; $(this).attr(index, this.box.index()) ; $(currentitem).attr(index, currentitem.box.index()) ; }, down : function() { // 移到上方 var box = this.box ; var node = this ; var startindex = currentitem.box.index() ; var endindex = node.box.index(); ; for(var i = endindex; i > startindex ; i--) { var prevnode = $(.item_content .item[index=+ (i - 1) +])[0] ; node.box = prevnode.box ; $(node).attr(index, node.box.index()) ; node.move() ; node = prevnode ; } currentitem.box = box ; $(currentitem).attr(index, box.index()) ; }, up : function() { // 移到上方 var box = this.box ; var node = this ; var startindex = node.box.index() ; var endindex = currentitem.box.index(); ; for(var i = startindex; i < endindex; i++) { var nextnode = $(.item_content .item[index=+ (i + 1) +])[0] ; node.box = nextnode.box ; $(node).attr(index, node.box.index()) ; node.move() ; node = nextnode ; } currentitem.box = box ; $(currentitem).attr(index, box.index()) ; } } directions[direction].call(this) ; }, this.drag = function() { // 拖拽 var oldposition = new position() ; var oldpointer = new pointer() ; var isdrag = false ; var currentitem = null ; $(this).mousedown(function(e) { e.preventdefault() ; oldposition.left = $(this).position().left ; oldposition.top = $(this).position().top ; oldpointer.x = e.clientx ; oldpointer.y = e.clienty ; isdrag = true ; currentitem = this ; }) ; $(document).mousemove(function(e) { var currentpointer = new pointer(e.clientx, e.clienty) ; if(!isdrag) return false ; $(currentitem).css({ opacity : 0.8, z-index : 999 }) ; var left = currentpointer.x - oldpointer.x + oldposition.left ; var top = currentpointer.y - oldpointer.y + oldposition.top ; $(currentitem).css({ left : left, top : top }) ; currentitem.pointer = currentpointer ; // 开始交换位置 currentitem.collisioncheck() ; }) ; $(document).mouseup(function() { if(!isdrag) return false ; isdrag = false ; currentitem.move(function() { $(this).css({ opacity : 1, z-index : 0 }) ; }) ; }) ; } this.init() ; }) ; }) ; </script> <style> .item_content ul { list-style:none; } .item_content ul li { width:200px; height:120px; float:left; margin:10px } .item_content { width:740px; height:460px; border:1px solid #ccc; margin:0 auto; } .item_content .item { width:200px; height:120px; line-height:120px; text-align:center; cursor:pointer; background:#ccc; } .item_content .item img { width:200px; height:120px; border-radius:6px; } </style> </head> <body> <p class="item_container"> <p class="item_content"> <ul> <li> <p class="item"> <img src="images/youku.png" /> </p> </li> <li> <p class="item"> <img src="images/jd.png" /> </p> </li> <li> <p class="item"> <img src="images/taobao.png" /> </p> </li> <li> <p class="item"> <img src="images/fenghuan.png" /> </p> </li> <li> <p class="item"> <img src="images/souhu.png" /> </p> </li> <li> <p class="item"> <img src="images/wangyi.png" /> </p> </li> <li> <p class="item"> <img src="images/renren.png" /> </p> </li> <li> <p class="item"> <img src="images/360.png" /> </p> </li> <li> <p class="item"> <img src="images/360game.png" /> </p> </li> </ul> </p> </p> <p style="text-align:center;margin:50px 0; font:normal 14px/24px 'microsoft yahei';"> <p>适用浏览器：ie8、360、firefox、chrome、safari、opera、傲游、搜狗、世界之窗. </p> </p> </body> </html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
tablesorter插件使用详解（附案例）
jquery实现根据中文表格排序
以上就是jquery实现某门户网站导航页图片拖动排序的详细内容。