jQuery仿360浏览器和火狐Firefox导航页九宫格图片拖拽排序并有抖动效果
2014-10-12 16:10:58  By: shinyuu

• shinyuu
• JQuery教程
• 0
• 6298
• 0

本例子主要实现的是通过jQuery仿360导航页和火狐浏览器图标div拖动排序效果

同样这个代码也可以实现九宫格图片拖拽排序特效、如果有使用九宫格的朋友有福了

主要使用了jQuery的拖拽功能、运行效果大家可以下载源代码观看哈、实现代码非常简单

HTML代码

<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>

jQuery初始化代码

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() ;
}

jQuery拖动码

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) ;
		}
	}) ;
}

jQuery交换位置

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) ;
}

最后给大家献上源代码的下载链接: http://dwtedx.com/download.html?bdkey=s/1mgC664g 密码: 4jbi

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛