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 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
图片格式的JavaScript和CSS速查手册
Aug 20 Javascript
javascript 学习笔记(onchange等)
Nov 14 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 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
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
PHP常用函数小技巧
2008/09/11 PHP
PHP的几个常用数字判断函数代码
2012/04/24 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
cakephp常见知识点汇总
2017/02/24 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
js jquery做的图片连续滚动代码
2008/01/06 Javascript
JS处理VBArray的函数使用说明
2008/05/11 Javascript
几个javascript操作word的参考代码
2009/10/26 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
js实现下一页页码效果
2017/03/07 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
vue移动端路由切换实例分析
2018/05/14 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
python 判断自定义对象类型
2009/03/21 Python
python实现数据图表
2017/07/29 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
python 内置函数汇总详解
2019/09/16 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
学校党员干部承诺书
2015/05/04 职场文书
高一化学教学反思
2016/02/22 职场文书