jQuery实现某门户网站导航页图片拖动排序

来源：汇智养生
这次给大家带来jQuery实现某门户网站导航页图片拖动排序，jQuery实现某门户网站导航页图片拖动排序的注意事项有哪些，下面就是实战案例，一起来看一下。
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的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>
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！