<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - draggable div#4</title>
<style>
*{margin:0;padding:0;border:none}
body,html{height:100%;width:100%}
.drag-box{user-select:none;background:#f0f0f0;z-index:2147483647;position:fixed;left:0;top:0;width:200px}
#dragBoxBar{align-items:center;display:flex;justify-content:space-between;background:#ccc;width:100%;height:40px;cursor:move;user-select:none}
.no-select{user-select:none}
.pointer-events{pointer-events:none}
.no-border{border:none}
#injectedBox{height:160px;display:flex;align-items:center;justify-content:center;font-size:2rem;background:#eee}
#dragdiv{z-index:2147483647;position:fixed;left:0;top:0;width:200px}
#draghead {background:#ccc;width:100%;height:40px;cursor:move}
#dragbody{height:160px;width:100%;background:#eee}
</style>
<script src="jquery-1.8.2.min.js"></script>
</head>
<body>
<div id="dragdiv">
<div id="draghead"></div>
<div id="dragbody"></div>
</div>
<script>
var isMouseDown,
initX,
initY,
height = $('#dragbody').offsetHeight,
width = $('#dragbody').offsetWidth,
dragBoxBar = document.getElementById('draghead'),
injectedBox = document.getElementById('dragbody'),
dragBox = document.getElementById('dragdiv');
dragBoxBar.addEventListener('mousedown', function (e) {
isMouseDown = true;
document.body.classList.add('no-select');
injectedBox.classList.add('pointer-events');
initX = e.offsetX;
initY = e.offsetY;
//dragBox.style.opacity = 0.5;
});
dragBoxBar.addEventListener('mouseup', function (e) {
mouseupHandler();
});
document.addEventListener('mousemove', function (e) {
if (isMouseDown) {
var cx = e.clientX - initX,
cy = e.clientY - initY;
if (cx < 0) cx = 0;
if (cy < 0) cy = 0;
if (window.innerWidth - e.clientX + initX < width + 16) cx = window.innerWidth - width;
if (e.clientY > window.innerHeight - height - dragBoxBar.offsetHeight + initY) cy = window.innerHeight - dragBoxBar.offsetHeight - height;
dragBox.style.left = cx + 'px';
dragBox.style.top = cy + 'px';
}
});
document.addEventListener('mouseup', function (e) {
if (e.clientY > window.innerWidth || e.clientY < 0 || e.clientX < 0 || e.clientX > window.innerHeight) {
mouseupHandler();
}
});
function mouseupHandler() {
isMouseDown = false;
document.body.classList.remove('no-select');
injectedBox.classList.remove('pointer-events');
//dragBox.style.opacity = 1;
}
</script>
</body>
</html>
