jQuery仿360导航页图标拖动排序效果代码分享

2019-11-20 11:45:01

字体：大中小

来源：转载

供稿：网友

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导航页图标拖动排序效果代码，希望大家可以喜欢。

上一篇：javascript中SetInterval与setTimeout的定时器用法

下一篇：js实现的黑背景灰色二级导航菜单效果代码