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><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>以上就是为大家分享的jQuery仿360导航页图标拖动排序效果代码，希望大家可以喜欢。
更多相关内容：
