js 图片拖拽效果实现
1、前端html排列
2、css设置
#listing_extra_images img{cursor: pointer;}
.image_item_content{position: relative;}
.image_item_content li{float: left;margin-right: 10px;width: 80px;height: 80px;} #这里需设置宽高
3、js
function Pointer(x, y) {
this.x = x ;
this.y = y ;
}
function Position(left, top) {
this.left = left ;
this.top = top ;
}
function imageDragSort(obj) {
obj.find(".image_item_content .drag_image_item").each(function (i) {
if($(this).parent()[0].tagName.toLowerCase() != 'li')
{
return true;
}
var inputName = $(this).parents('.row').attr('name');
this.init = function () { // 初始化
this.box = $(this).parent();
console.log(this.box);
console.log(this.box.width());
console.log(this.box.offset().left);
console.log($(this).parents('.row').offset().left);
$(this).attr("index", i).css({
position: "absolute",
left: this.box.offset().left - $(this).parents('.row').offset().left,
top: this.box.offset().top - $(this).parents('.row').offset().top
}).appendTo($(this).parents(".image_item_content"));
$(this).find(':hidden').attr('name', inputName + '[' + i + ']');
this.drag();
obj.attr('hasDrag','yes');
},
this.move = function (callback) { // 移动
$(this).stop(true).animate({
left: this.box.offset().left - $(this).parents('.row').offset().left,
top: this.box.offset().top - $(this).parents('.row').offset().top
}, 500, function () {
if (callback) {
callback.call(this);
}
});
},
this.collisionCheck = function () {
var currentItem = this;
var direction = null;
$(this).siblings(".drag_image_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());
$(this).find(':hidden').attr('name', inputName + '[' + this.box.index() + ']');
$(currentItem).attr("index", currentItem.box.index()).find(':hidden').attr('name', inputName + '[' + 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 = $(this).parents('.image_item_content').find(".drag_image_item[index=" + (i - 1) + "]")[0];
node.box = prevNode.box;
$(node).attr("index", node.box.index());
$(node).find(':hidden').attr('name', inputName + '[' + node.box.index() + ']');
node.move();
node = prevNode;
}
currentItem.box = box;
$(currentItem).attr("index", box.index()).find(':hidden').attr('name', inputName + '[' + 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 = $(this).parents('.image_item_content').find(".drag_image_item[index=" + (i + 1) + "]")[0];
node.box = nextNode.box;
$(node).attr("index", node.box.index());
$(node).find(':hidden').attr('name', inputName + '[' + node.box.index() + ']');
node.move();
node = nextNode;
}
currentItem.box = box;
$(currentItem).attr("index", box.index()).find(':hidden').attr('name', inputName + '[' + 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();
});
}
4、对象调用
imageDragSort($('#listing_extra_images'));