<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery图片拖动排序代码</title>
<style type="text/css">
.item_container{position:relative;height:auto;overflow:hidden;}
.item_content ul{list-style:none;padding:0;margin:0;}
.item_content ul li{width:200px;height:160px;float:left;margin:10px }
.item_content{width:50%;height:auto;border:1px solid #ccc;float:left;}
.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;}
.close{display:block;width:20px;height:20px;top:0;right:0;z-index:9999;position:absolute;text-align:center;font-size:16px;cursor:pointer;color:aliceblue;}
</style>
</head>
<body>
<div class="item_container">
<div class="item_content" id="imageChange">
<ul>
<li>
<div class="item"> <img src="img/500x500-1.png" width="150" height="150">
</div>
</li>
<li>
<div class="item"> <img src="img/500x500-2.png" width="150" height="150">
</div>
</li>
<li>
<div class="item"> <img src="img/500x500-3.png" width="150" height="150">
</div>
</li>
<li>
<div class="item"> <img src="img/500x500-4.png" width="150" height="150">
</div>
</li>
<li>
<div class="item"> <img src="img/500x500-5.png" width="150" height="150">
</div>
</li>
<li>
<div class="item"> <img src="img/500x500-6.png" width="150" height="150">
</div>
</li>
<li>
<div class="item"> <img src="img/500x500-7.png" width="150" height="150">
</div>
</li>
</ul>
</div>
</div>
<script src="js/jquery-1.8.3.min.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_container .item").each(function (i) {
this.init = function () { // 初始化
this.box = $(this).parent();
$(this).attr("index", i).css({
position: "absolute",
left: this.box.position().left,
top: this.box.position().top,
cursor: "move"
}).appendTo(".item_container");
this.drag();
},
this.move = function (callback) { // 移动
$(this).stop(true).animate({
left: this.box.position().left,//相对父级的距离
top: this.box.position().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.position().top < this.box.position().top) {
direction = "down";
} else if (currentItem.box.position().top > this.box.position().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_container .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_container .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>
