拖动div元素 - 爱码网

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