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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
| window.onload = function() {
var oUl= document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
var disX = 0;
var disY = 0;
var minZindex = 1;
var aPos = [];
for (var i = 0; i < aLi.length; i++) {
var t = aLi[i].offsetTop;
var l = aLi[i].offsetLeft;
aLi[i].style.top = t + 'px';
aLi[i].style.left = l + 'px';
aPos[i] = { left: l, top: t };
aLi[i].index = i;
}
for (var i = 0; i < aLi.length; i++) {
aLi[i].style.position = 'absolute';
aLi[i].style.margin = 0;
setDrag(aLi[i]);
}
function setDrag(obj) {
obj.onmouseover = function() {
obj.style.cursor = 'move';
}
obj.onmousedown = function(event) {
var scrollTop = document.documentElement.scrollTop
|| document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft
||document.body.scrollLeft;
obj.style.zIndex = minZindex++;
disX = event.clientX + scrollLeft - obj.offsetLeft;
disY = event.clientY + scrollTop - obj.offsetTop;
document.onmousemove = function(event) {
var l = event.clientX - disX + scrollLeft;
var t = event.clientY - disY + scrollTop;
obj.style.left = l + 'px';
obj.style.top = t + 'px';
for (var i = 0; i < aLi.length; i++) {
aLi[i].className = '';
}
var oNear = findMin(obj);
if (oNear) {
oNear.className = 'active';
}
}
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
var oNear = findMin(obj);
if (oNear) {
oNear.className = '';
oNear.style.zIndex = minZindex++;
obj.style.zIndex = minZindex++;
startMove(oNear, aPos[obj.index]);
startMove(obj, aPos[oNear.index]);
oNear.index += obj.index;
obj.index = oNear.index - obj.index;
oNear.index = oNear.index - obj.index;
} else {
startMove(obj,aPos[obj.index]);
}
}
clearInterval(obj.timer);
return false;
}
}
function colTest(obj1, obj2) {
var t1 = obj1.offsetTop;
var r1 = obj1.offsetWidth + obj1.offsetLeft;
var b1 = obj1.offsetHeight + obj1.offsetTop;
var l1 = obj1.offsetLeft;
var t2 = obj2.offsetTop;
var r2 = obj2.offsetWidth + obj2.offsetLeft;
var b2 = obj2.offsetHeight + obj2.offsetTop;
var l2 = obj2.offsetLeft;
if( t1 > b2 || r1 < l2 || b1 < t2 || l1 > r2) {
return false;
} else {
return true;
}
}
function getDis(obj1, obj2) {
var a = obj1.offsetLeft - obj2.offsetLeft;
var b = obj1.offsetTop - obj2.offsetTop;
return Math.sqrt(Math.pow(a,2) + Math.pow(b, 2));
}
function findMin(obj) {
var minDis = 999999999;
var minIndex = -1;
for(var i = 0; i < aLi.length; i++) {
if (obj === aLi[i]) continue;
if (colTest(obj, aLi[i])) {
var dis = getDis(obj, aLi[i]);
if (dis < minDis) {
minDis = dis;
minIndex = i;
}
}
}
if (minIndex === -1) {
return null;
} else {
return aLi[minIndex];
}
}
}
|