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 28 Javascript
js新闻滚动 js如何实现新闻滚动效果
Jan 07 Javascript
ExtJS自定义主题(theme)样式详解
Nov 18 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 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
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
python运行其他程序的实现方法
2017/07/14 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
python读取文件名并改名字的实例
2019/01/07 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
美的官方商城:Midea
2016/09/14 全球购物
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
介绍一下如何优化MySql
2016/12/20 面试题
美术专业学生个人自我评价
2013/09/19 职场文书
蔬菜基地的创业计划书
2014/01/06 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
党支部评议意见
2015/06/02 职场文书