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
|
import h from '../Util/DomUtil.js';
import { clamp } from '../Util/Util.js';
class DraggableWindow {
constructor(title) {
this.div = h('div', { 'class': 'draggable-window', 'style': 'position: absolute; z-index: 9' });
this.header = h('div', title, { 'class': 'draggable-header', 'style': 'cursor: move; z-index: 10' });
this.div.appendChild(this.header);
this.lastPosition = { x: 0, y: 0 };
this.position = { x: 0, y: 0 };
this.div.addEventListener('mousedown', e => {
if (e.button != 0) return;
e.preventDefault();
this.position = {
x: this.div.offsetLeft,
y: this.div.offsetTop,
};
this.lastPosition = {
x: e.clientX,
y: e.clientY,
};
document.onmousemove = e => {
const dx = e.clientX - this.lastPosition.x;
const dy = e.clientY - this.lastPosition.y;
this.position.x += dx;
this.position.y += dy;
this.lastPosition = {
x: e.clientX,
y: e.clientY,
};
this.div.style.left = `${clamp(this.position.x, 0, window.innerWidth-20)}px`;
this.div.style.top = `${clamp(this.position.y, 0, window.innerHeight-20)}px`;
};
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
};
});
document.body.appendChild(this.div);
}
appendChild(element) {
this.div.appendChild(element);
}
setTitle(title) {
this.header.textContent = title;
}
}
export default DraggableWindow;
|
