Jquery Div自由拖动排序,兼容性：IE7以上以及其他主流浏览器（Chrome,FireFox,Safari…)。排序是采用2个Div模块（源模块和目标模块）位置对调。其他位置不变。
拖动的时候保存当前的Div模块的位置。
主要核心就是在拖动目标元素时，检测当前的鼠标指针是否移入了除目标元素之外的其他DIV模块中，如果有，就可以作为交换位置事件开始。
更新保存的Div模块位置，以备下一次轮换时需要。
主要原理就这么多，这种直接交互2个模块位置的难度不大。
Jq代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
var SortDivHandler = {
CurrentLocationX: 0,
CurrentLocationY: 0,
CurrentSortFlag: 0,
CurrentSortDiv: null,
CurrentSortMove: 0,
Initialize: function() {
var isStart = false;
var sortItemCount = parseInt(($("#SortContaint").width() - 90) / 300);
for (var i = 0; i < $(".SortItem").length; i ) {
var floorCount = Math.ceil((i 1) / sortItemCount);
$($(".SortItem")[i]).attr("id", i);
$($(".SortItem")[i]).html(i 1);
if ((i 1) <= sortItemCount) {
$($(".SortItem")[i]).animate({
left: 30 i * 200 (i - 1) * 30 "px",
top: "30px"
}, 200 i * 100);
} else if ((i 1) > 3) {
var itemIndex = (i) % 3;
$($(".SortItem")[i]).animate({
left: 30 itemIndex * 200 (itemIndex - 1) * 30 "px",
top: (floorCount - 1) * 120 30 * (floorCount - 1) 30
}, 300 i * 100);
}
}
var isDrag = true;
$(".SortItem").mousedown(function(e) {
var SortTarget = $(this);
SortDivHandler.CurrentSortMove = 0;
SortDivHandler.CurrentSortDiv = $(this);
isDrag = true;
$(".SortItem").css("z-index", 1);
SortDivHandler.CurrentSortDiv.css("z-index", -1).css("opacity", 0.8);
SortDivHandler.CurrentLocationX = SortTarget.offset().left;
SortDivHandler.CurrentLocationY = SortTarget.offset().top;
SortTarget.attr("drag", 1);
SortTarget.css("position", "absolute");
SortTarget.css("cursor", "default");
var currentTarget = SortTarget;
var currentDisX = e.pageX - $(this).offset().left;
var currentDisY = e.pageY - $(this).offset().top;
$(document).mousemove(function(event) {
if ($(currentTarget).attr("drag") == 0 || SortDivHandler.CurrentSortMove == 1) return;
var currentX = event.clientX;
var currentY = event.clientY;
var cursorX = event.pageX - currentDisX; // $(this).offset().left;
var cursorY = event.pageY - currentDisY; //-$(this).offset().top;
// $(currentTarget)
$(currentTarget).css("top", cursorY - 8 "px").css("left", cursorX - 30 "px");
isStart = true;
});
$(document).mouseup(function() {
// if(isDrag==false)return;
$(currentTarget).attr("drag", 0);
});
});
$(".SortItem").mousemove(function() {
if (isStart == false) return;
if (SortDivHandler.CurrentSortFlag == 0) {
if ($(this).attr("id") == SortDivHandler.CurrentSortDiv.attr("id")) {
return;
} else {
if (SortDivHandler.CurrentSortMove == 1) return;
SortDivHandler.CurrentSortMove = 1;
var targetX = $(this).offset().left;
var targetY = $(this).offset().top;
SortDivHandler.CurrentSortDiv.stop(true).animate({
left: targetX - 30 "px",
top: targetY - 8 "px"
}, 500, function() {
$(this).css("opacity", 1);
});
$(this).stop(true).animate({
left: SortDivHandler.CurrentLocationX - 30 "px",
top: SortDivHandler.CurrentLocationY - 8 "px"
}, 300, function() {});
isDrag = false;
}
}
});
$(".SortItem").mouseup(function() {
if (isDrag == false) return;
SortDivHandler.CurrentSortMove = 1;
SortDivHandler.CurrentSortDiv.stop(true).animate({
left: SortDivHandler.CurrentLocationX - 30 "px",
top: SortDivHandler.CurrentLocationY - 8 "px"
}, 500, function() {
SortDivHandler.CurrentSortDiv.css("z-index", -1).css("opacity", 1);
});
});
}
}
|
