最新活动温馨提示:99元终身VIP,整站资源免费下载!
头像

jquery可任意拖动排序的导航图片效果

来源:http://www.erdangjiade.com/js/1128.html 二当家的 2017-02-10 21:02浏览(824)

jquery可任意拖动排序的导航图片效果

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,99元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

jquery可任意拖动排序的导航图片效果
分类:悬浮层/弹出层 > 拖动 难易:初级
查看演示 下载资源: 7

关注微信号获取此Demo视频教程:

下载资源 下载积分: 10 积分
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jquery可任意拖动排序的导航图片效果</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<style type="text/css">
		.item_content ul  {
			list-style:none;
		}
		.item_content ul li {
			width:200px;
			height:120px;
			float:left;
			margin:10px
		}
		.item_content {
			width:740px;
			height:460px;
			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="htmleaf-container">
		<header class="htmleaf-header">
			<h1>jquery可任意拖动排序的导航图片效果</h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Layout-Interface/201612294291.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<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>
	
	<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
	<script type="text/javascript">
		$(function() {
			function Pointer(x, y) {
				this.x = x ;
				this.y = y ;
			}
			function Position(left, top) {
				this.left = left ;
				this.top = top ;
			}
			$(".item_content .item").easch(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>
</body>
</html>
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/1128.html
评论1
头像

友情提示:垃圾评论一律封号,下载出错或任何技术问题请联系QQ 826096331

  • 头像 沙发
    02-13 13:56
    lzw0411
    任意拖动排序的导航
1 2