<!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>