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 相关文章推荐
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
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
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
php获取服务器信息的实现代码
2013/02/04 PHP
php获取url参数方法总结
2014/11/13 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
javascript实现des解密加密全过程
2014/04/03 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
javascript实现禁止复制网页内容
2014/12/16 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
Python操作列表的常用方法分享
2014/02/13 Python
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
django中send_mail功能实现详解
2018/02/06 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
C语言50道问题
2014/10/23 面试题
节水倡议书范文
2014/04/15 职场文书
捐资助学倡议书
2014/04/15 职场文书
就业协议书范本
2014/10/08 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
提档介绍信范文
2015/10/22 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python