jquery實現360瀏覽器導航頁圖標拖動從新排序特效源碼是一款模仿360瀏覽器導航頁網站圖標拖動排序的代碼。本段代碼適應于所有網頁使用，有興趣的朋友們可以學習一下。
運行效果圖： ----------------------查看效果 下載源碼-----------------------
小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
為大家分享的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>360導航頁圖標拖動排序效果代碼</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> <div class="item_container"> <div class="item_content"> <ul> <li> <div class="item"> <img src="images/youku.png" /> </div> </li> <li> <div class="item"> <img src="images/jd.png" /> </div> </li> <li> <div class="item"> <img src="images/taobao.png" /> </div> </li> <li> <div class="item"> <img src="images/fenghuan.png" /> </div> </li> <li> <div class="item"> <img src="images/souhu.png" /> </div> </li> <li> <div class="item"> <img src="images/wangyi.png" /> </div> </li> <li> <div class="item"> <img src="images/renren.png" /> </div> </li> <li> <div class="item"> <img src="images/360.png" /> </div> </li> <li> <div class="item"> <img src="images/360game.png" /> </div> </li> </ul> </div> </div><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"><p>適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p></div></body></html>以上就是為大家分享的jQuery仿360導航頁圖標拖動排序效果代碼，希望大家可以喜歡。
新聞熱點
疑難解答
