Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
88 lines (68 sloc) 1.88 KB
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Simple box drag example</title>
<style>
html {
font-family: sans-serif;
overflow: hidden;
}
body {
background: #ffe;
margin: 0;
}
div {
background-color: #1FE200;
background-image: linear-gradient(to bottom right, rgba(0,0,0,0), rgba(0,0,0,0.4));
width: 200px;
height: 150px;
border: 1px solid green;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<script>
document.body.width = window.innerWidth;
document.body.height = window.innerHeight;
var mouseX, mouseY;
document.onmousemove = function(e) {
mouseX = e.clientX;
mouseY = e.clientY;
}
var div = document.querySelector('div');
var initialMouseX = null;
var initialMouseY = null;
var initialBoxX, initialBoxY, rAF;
div.onmousedown = function() {
initialBoxX = div.offsetLeft;
initialBoxY = div.offsetTop;
movePanel();
}
document.onmouseup = stopMove;
function movePanel() {
if(initialMouseX === null) {
initialMouseX = mouseX;
initialMouseY = mouseY;
} else {
var mouseMoveX = mouseX - initialMouseX;
var mouseMoveY = mouseY - initialMouseY;
var offsetX = initialBoxX + mouseMoveX;
var offsetY = initialBoxY + mouseMoveY;
console.log(offsetX + ' ' + offsetY);
div.style.left = offsetX + 'px';
div.style.top = offsetY + 'px';
}
rAF = requestAnimationFrame(movePanel);
}
function stopMove() {
cancelAnimationFrame(rAF);
console.log('mousemove stopped');
initialMouseX = null;
initialMouseY = null;
}
</script>
</body>
</html>
You can’t perform that action at this time.