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
|
function MultiDrag() {
this.del = false;
this.drag = [];
window.addEventListener("mousemove", this.update.bind(this));
document.body.addEventListener("mouseleave", this.stopDraggingAll.bind(this));
}
MultiDrag.prototype = {
addDragEl: function(el, ox, oy, px, py, pt) {
if(this.del)
return;
el.style.transitionDuration = "0.04s";
this.drag.push({
e: el,
osx: ox,
osy: oy,
prx: px,
pry: py,
ptd: pt
});
return this.drag.length - 1;
},
startDragging: function(mevent) {
if(this.del)
return;
console.log(mevent);
if(mevent.button != 0)
return;
let pos = mevent.target.getBoundingClientRect();
return this.addDragEl(
mevent.currentTarget,
mevent.clientX - pos.left,
mevent.clientY - pos.top,
mevent.currentTarget.style.left,
mevent.currentTarget.style.top,
mevent.currentTarget.style.transitionDuration
);
},
stopDragging: function(i) {
this.del = true;
if (i < 0 || i >= this.drag.length)
return;
this.drag[i].e.style.transitionDuration = this.drag[i].ptd;
this.drag[i].e.style.left = this.drag[i].prx;
this.drag[i].e.style.top = this.drag[i].pry;
this.drag.splice(i, 1);
this.del = false;
},
stopDraggingAll: function() {
this.del = true;
while (this.drag.length > 0) {
this.drag[0].e.style.transitionDuration = this.drag[0].ptd;
this.drag[0].e.style.left = this.drag[0].prx;
this.drag[0].e.style.top = this.drag[0].pry;
this.drag.shift();
}
this.del = false;
},
update: function(e) {
for (let i = 0; i < this.drag.length && !this.del; i++) {
this.drag[i].e.style.left = e.clientX - this.drag[i].osx + "px";
this.drag[i].e.style.top = e.clientY - this.drag[i].osy + "px";
}
}
};
|
