99 lines
2.2 KiB
HTML
99 lines
2.2 KiB
HTML
|
<!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>
|