-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabsolute-positioner.html
76 lines (66 loc) · 2.22 KB
/
absolute-positioner.html
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
<!DOCTYPE html>
<html>
<head>
<title>Click to Move Elements</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<!-- <script src='./resources/app.js'></script>
<link rel='stylesheet' type='text/css' href='./resources/style.css'> -->
<style type='text/css'>
body {
/* BODY MUST HAVE SIZE FOR RANDO EVENT HANDLERS TO WORK */
margin: 0 auto;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div class="outer-element">
<div class="inner-element"></div>
</div>
</body>
<script>
var mouseOriginX;
var mouseOriginY;
var mousePosition = function (event) {
// debugger;
!mouseOriginY ? mouseOriginY = event.clientY: console.log("the present position is: " + event.clientY);
!mouseOriginX ? mouseOriginX = event.clientX: console.log("the present position is: " + event.clientX);
}
var repositionElement = function (presentX, presentY) {
// Set the position of the element to absolute
// Set the position of the element to the present location via clientRect
// Eact time this gets called it will need to move the element N-number of pixels, where N is the distance from mouseOriginX and presentX
//
}
var clickDown = function (event) {
// debugger;
}
var clickUp = function (event) {
// debugger;
document.body.removeEventListener('mousemove', mousePosition);
mouseOriginX = null;
mouseOriginY = null;
}
document.body.addEventListener('mousemove', mousePosition);
// // track the movement of the mouse position
// //mousemove
// // document.body.addEventListener('mousemove', function(event){
// // mousePosition(event.target.id || event.srcElement.id)
// // });
// document.body.addEventListener('mousemove', mousePosition);
// // On mouse clicking down bind the movement of the mouse to the inner-element
// var mouseDown = 0;
document.body.addEventListener('mousedown', clickDown);
// document.body.onmousedown = function() {
// mouseDown ++
// console.log("down")
// }
// document.body.onmouseup = function() {
// console.log("up")
// }
// On releasing the mouse button the binding from above will be removed
document.body.addEventListener('mouseup', clickUp);
// display a list of what elements have been updated and what the new styles are
</script>
</html>