228 lines
8.9 KiB
JavaScript
228 lines
8.9 KiB
JavaScript
function initDragHtml() {
|
|
|
|
var img_htmls='<div class="item_content" id="imageChange"><ul>';
|
|
$("#main_image .clear_both").remove();
|
|
$("#main_image #over").remove();
|
|
$("#main_image #imageChange").remove();
|
|
var dic = new Array();
|
|
$("#main_image").children().each(function () {
|
|
var inHtml = $(this).html();
|
|
var index = $(this).attr("index");
|
|
dic[index] = inHtml;
|
|
});
|
|
dic = dic.filter(d=>d);
|
|
|
|
if(dic.length === 0) {
|
|
$("#main_image").children().each(function () {
|
|
var inHtml = $(this).html();
|
|
if ($(this).html().indexOf('<ul><li>') >= 0) {
|
|
var img_html = '<li><div class="item">';
|
|
img_html += inHtml;
|
|
img_html += '</div></li>';
|
|
img_htmls += img_html;
|
|
} else {
|
|
var img_html = '<li><div class="item"><ul><li>';
|
|
img_html += inHtml;
|
|
img_html += '</li></ul></div></li>';
|
|
img_htmls += img_html;
|
|
}
|
|
});
|
|
}
|
|
else
|
|
{
|
|
var sortRes = Object.keys(dic).sort(function(a,b){ return a - b; });
|
|
for (var key in sortRes) {
|
|
if(dic[sortRes[key]].indexOf('<ul><li>') >= 0) {
|
|
var img_html = '<li><div class="item" index=' + key + '>';
|
|
img_html += dic[sortRes[key]];
|
|
img_html += '</div></li>';
|
|
img_htmls += img_html;
|
|
}
|
|
else {
|
|
var img_html = '<li><div class="item" index=' + key + '><ul><li>';
|
|
img_html += dic[sortRes[key]];
|
|
img_html += '</li></ul></div></li>';
|
|
img_htmls += img_html;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
img_htmls +='</ul></div>';
|
|
$("#main_image").html(img_htmls);
|
|
|
|
initDragImg();
|
|
|
|
$("#main_image").children().each(function(){
|
|
//debugger;
|
|
$(this).html;
|
|
})
|
|
|
|
img_htmls = '<div class="over" id="over" style="display: none;">' +
|
|
'<p style="width:100%;height:100%;background-color: #000000;opacity:0.5;z-index:3333;"></p>' +
|
|
'<input type="button" class="pre_page" style="position: absolute;top:50%;left:2%;z-index:5555;font-size: 20px;width: 100px;height: 50px;background-color: #FFFFFFF;border-radius: 5%; margin-right: 50px;" value="上一张"/>' +
|
|
'<img src="" style="width:600px;position: absolute;top:10%;left:20%;z-index:5555;" id="over_img"/>' +
|
|
'<input type="hidden" id="over_img_index" value="0"/>' +
|
|
'<input type="button" class="past_page" style="position: absolute;top:50%;right:2%;z-index:5555;font-size: 20px;width: 100px;height: 50px;background-color: #FFFFFFF;border-radius: 5%; " value="下一张"/>' +
|
|
'</div>';
|
|
$("#main_image").append(img_htmls);
|
|
img_htmls = '<div class="clear_both" style="clear: both;">' +
|
|
'</div>';
|
|
$("#main_image").append(img_htmls);
|
|
}
|
|
|
|
function initDragImg(){
|
|
|
|
$("#main_image .item").each(function(i) {
|
|
this.init = function() { // 初始化 this为item
|
|
this.box = $(this).parent();//li
|
|
|
|
for (var j = 0; j < 200; j++) {
|
|
var imgIdStr = 'id="img' + j + '"';
|
|
|
|
if($(this).html().indexOf(imgIdStr) >= 0) {
|
|
$(this).attr("id", 'image' + j);
|
|
if($(this).attr("index") === undefined) {
|
|
$(this).attr("index", j);
|
|
}
|
|
$(this).css({
|
|
position : "absolute",
|
|
left : this.box.offset().left,
|
|
//top:80
|
|
top : this.box.offset().top
|
|
}).appendTo("#main_image");
|
|
}
|
|
}
|
|
|
|
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 - $(document).scrollTop() &&
|
|
(currentItem.pointer.x < this.box.offset().left + this.box.width()) &&
|
|
(currentItem.pointer.y < this.box.offset().top - $(document).scrollTop() + 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 = $("#main_image .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 = $("#main_image .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() ;
|
|
}) ;
|
|
}
|
|
function Pointer(x, y) {
|
|
this.x = x ;
|
|
this.y = y ;
|
|
}
|
|
function Position(left, top) {
|
|
this.left = left ;
|
|
this.top = top ;
|
|
} |