-
Notifications
You must be signed in to change notification settings - Fork 0
/
dragPane.js
62 lines (50 loc) · 1.9 KB
/
dragPane.js
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
function run() {
var isMouseDown = false;
let mouseX = 0;
let mouseY = 0;
let mouseXOffset = 0;
let mouseYOffset = 0;
function updateMouse(mouseEvent) {
mouseX = mouseEvent.clientX;
mouseY = mouseEvent.clientY;
}
function dragPane(pane, selector) {
if (isMouseDown) {
let nextX = mouseX - mouseXOffset;
let nextY = mouseY - mouseYOffset;
if (nextX > 0 && nextX < window.innerWidth - $(selector).width()) {
pane.style.left = String(nextX) + "px";
} else if (nextX < 0) {
pane.style.left = "0px";
} else if (nextX > window.innerWidth - $(selector).width()) {
pane.style.left = String(window.innerWidth - $(selector).width()) + "px";
}
if (nextY > 0 && nextY < window.innerHeight - $(selector).height()) {
pane.style.top = String(nextY) + "px";
} else if (nextY < 0) {
pane.style.top = "0px";
} else if (nextY > window.innerHeight - $(selector).height()) {
pane.style.top = String(window.innerHeight - $(selector).height()) + "px";
}
window.setTimeout(function() { dragPane(pane, selector) }, 10);
return;
}
}
$(".dragPane .dragSelector").mousedown(function(e) {
if ($(e.target).is('input, button')) {
return;
}
window.addEventListener('mousemove', updateMouse);
updateMouse(e);
isMouseDown = true;
let offset = $(this).parent().offset();
mouseXOffset = Math.abs(offset.left - $(window).scrollLeft() - mouseX);
mouseYOffset = Math.abs(offset.top - $(window).scrollTop() - mouseY);
dragPane($(this).parent()[0], $(this)[0]);
});
window.addEventListener('mouseup', function() {
isMouseDown = false;
window.removeEventListener('mousemove', updateMouse);
});
}
$(window).on('load', run);