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 相关文章推荐
jquery学习笔记二 实现可编辑的表格
Apr 09 Javascript
JS实现图片预加载无需等待
Dec 21 Javascript
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
浅析Javascript ES6中的原生Promise
Aug 25 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
JS触摸与手势事件详解
May 09 Javascript
js学使用setTimeout实现轮循动画
Jul 17 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
Angular实现svg和png图片下载实现
May 05 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
php curl 伪造IP来源的实例代码
2012/11/01 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
checkbox 多选框 联动实现代码
2008/10/22 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
Python基本数据类型详细介绍
2014/03/11 Python
Python Deque 模块使用详解
2014/07/04 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
python3 拼接字符串的7种方法
2018/09/12 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
介绍一下Python中webbrowser的用法
2013/05/07 面试题
亲子读书活动方案
2014/02/22 职场文书
医德医风演讲稿
2014/05/20 职场文书
2014年电厂工作总结
2014/12/04 职场文书
大学军训决心书
2015/02/05 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript