area.html
2.17 KB
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
<!DOCTYPE html>
<html>
<head>
<title>Move to Click Position</title>
<style type="text/css">
body {
background-color: #FFF;
margin: 0px;
margin-top: 0px;
left:0px
top:0px
}
#contentContainer {
position: absolute;
left: 10px;
top: 15px;
width: 150px;
height: 250px;
border: 0px black solid;
overflow: hidden;
background-color: #D2D2D2;
cursor: pointer;
}
#out {
position: absolute;
left: 30px;
top: 2000px;
width: 100px;
height: 100px;
background-color: blue;
}
#thing,#thinga {
outline: 2px black solid;
background-color: red;
position: relative;
display:block;
left: 60px;
top: 62px;
width: 20px;
height: 22px;
outline-radius: 50% 50%;
border-radius: 45% 45%;
//transition: left .2s ease-in, top .2s ease-in;
}
</style>
</head>
<body>
<div id="contentContainer">
<div id="thing"> </div>
</div>
<div id="out">
<div id="thinga"> </div>
</div>
<script>
(function(window) {
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
var out = document.querySelector("#out");
container.addEventListener("click", getClickPosition, false);
out.addEventListener("click", getClickPosition, false);
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
while (element) {
xPosition += (element.offsetLeft + element.clientLeft);
yPosition += (element.offsetTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
function getClickPosition(e) {
var elem = e.currentTarget;
var div = elem.querySelector('div');
var parentPosition = getPosition(e.currentTarget);
var xOffset = Math.max(document.documentElement.scrollLeft,document.body.scrollLeft);
var yOffset = Math.max(document.documentElement.scrollTop,document.body.scrollTop);
var xPosition = xOffset + e.clientX - parentPosition.x - (div.clientWidth / 2);
var yPosition = yOffset + e.clientY - parentPosition.y - (div.clientHeight / 2);
div.style.left = xPosition + "px";
div.style.top = yPosition + "px";
}
})(window);
</script>
</body>
</html>