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


Posted in Javascript onAugust 24, 2015

jquery实现360浏览器导航页图标拖动从新排序特效源码是一款模仿360浏览器导航页网站图标拖动排序的代码。本段代码适应于所有网页使用,有兴趣的朋友们可以学习一下。

运行效果图:                                         ----------------------查看效果 下载源码-----------------------

 jQuery仿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 相关文章推荐
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
js导入导出excel(实例代码)
Nov 25 Javascript
javascript的数组和常用函数详解
May 09 Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
微信小程序实现图片上传
May 23 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
详细介绍Next.js脚手架完整搭建封装
Apr 26 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 #Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 #Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 #Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 #Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 #Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 #Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 #Javascript
You might like
星际流派综述
2020/03/04 星际争霸
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
python3实现读取chrome浏览器cookie
2016/06/19 Python
利用python批量检查网站的可用性
2016/09/09 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
Python 爬虫的原理
2020/07/30 Python
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
应届生幼儿园求职信
2013/11/12 职场文书
总经理助理工作职责
2014/02/06 职场文书
岗位说明书怎么写
2014/07/30 职场文书
基层工作经验证明样本
2014/11/16 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
离职证明格式样本
2015/06/12 职场文书
nginx优化的六点方法
2021/03/31 Servers
vue使用echarts实现折线图
2022/03/21 Vue.js