拖动div元素-蒲公英云

拖动div元素

蔚落 2023-06-01 12:38 103阅读 0赞

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