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
127
128
|
'use strict';
class MultiDrag extends EventTarget {
del = false;
drag = [];
cbs = [];
constructor() {
super();
window.addEventListener("mousemove", this.update.bind(this));
document.body.addEventListener("mouseleave", this.stopDraggingAll.bind(this));
}
addDragEl(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;
}
dragging(e) {
for(let i in this.drag) {
if(this.drag[i].e == e)
return true;
}
return false;
}
startDragging(e) {
if(this.del)
return;
console.log(e);
if(e.button != 0)
return;
this.dispatchEvent(new Event("dragstart", {target: e.target}));
return this.addDragEl(
e.target,
e.pageX - parseInt(e.target.style.left),
e.pageY - parseInt(e.target.style.top),
e.target.style.left,
e.target.style.top,
e.target.style.transitionDuration
);
}
stopDragging(i) {
if(this.del)
return;
this.del = true;
if (i < 0 || i >= this.drag.length)
return;
var cap = {target: null, x: 0, y: 0};
this.drag[i].e.style.transitionDuration = this.drag[i].ptd;
cap.x = parseInt(this.drag[i].e.style.left);
this.drag[i].e.style.left = this.drag[i].prx;
cap.y = parseInt(this.drag[i].e.style.top);
this.drag[i].e.style.top = this.drag[i].pry;
cap.target = this.drag.splice(i, 1).e;
this.del = false;
this.dispatchEvent(new Event("dragstop", cap));
}
stopDraggingEl(el) {
for(let d of this.drag) {
if(d.e === el)
this.stopDragging(this.drag.indexOf(d));
}
}
stopDraggingAll() {
if(this.del)
return;
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;
this.dispatchEvent(new Event("dragstopall"));
}
update(e) {
for (let i = 0; i < this.drag.length && !this.del; i++) {
this.drag[i].e.style.left = e.pageX - this.drag[i].osx + "px";
this.drag[i].e.style.top = e.pageY - this.drag[i].osy + "px";
}
}
addTarget(e) {
e.addEventListener("mousedown", this.startDragging.bind(this));
e.addEventListener("mouseup", this.stopDraggingEl.apply(this, [e]))
}
removeTarget (e) {
}
}
|
