这次给大家带来jquery实现某门户网站导航页图片拖动排序，jquery实现某门户网站导航页图片拖动排序的注意事项有哪些，下面就是实战案例，一起来看一下。
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的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>图标拖动排序效果代码</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>
<p class="item_container">
<p class="item_content">
<ul>
<li>
<p class="item">
<img src="images/youku.png" />
</p>
</li>
<li>
<p class="item">
<img src="images/jd.png" />
</p>
</li>
<li>
<p class="item">
<img src="images/taobao.png" />
</p>
</li>
<li>
<p class="item">
<img src="images/fenghuan.png" />
</p>
</li>
<li>
<p class="item">
<img src="images/souhu.png" />
</p>
</li>
<li>
<p class="item">
<img src="images/wangyi.png" />
</p>
</li>
<li>
<p class="item">
<img src="images/renren.png" />
</p>
</li>
<li>
<p class="item">
<img src="images/360.png" />
</p>
</li>
<li>
<p class="item">
<img src="images/360game.png" />
</p>
</li>
</ul>
</p>
</p>
<p style="text-align:center;margin:50px 0; font:normal 14px/24px 'microsoft yahei';">
<p>适用浏览器：ie8、360、firefox、chrome、safari、opera、傲游、搜狗、世界之窗. </p>
</p>
</body>
</html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
tablesorter插件使用详解（附案例）
jquery实现根据中文表格排序
以上就是jquery实现某门户网站导航页图片拖动排序的详细内容。