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

这次给大家带来jQuery实现某门户网站导航页图片拖动排序，jQuery实现某门户网站导航页图片拖动排序的注意事项有哪些，下面就是实战案例，一起来看一下。

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的360导航页图标拖动排序效果代码如下

 $(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 = "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() ; }) ; }) ;.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;} 
 
  

适用浏览器：ie8、360、firefox、chrome、safari、opera、傲游、搜狗、世界之窗.

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

tablesorter插件使用详解（附案例）

jquery实现根据中文表格排序

以上就是jQuery实现某门户网站导航页图片拖动排序的详细内容，更多请关注【创想鸟】其它相关文章！