拖动div元素

Posted 2020-11-13 wangyongx

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了拖动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>

以上是关于拖动div元素的主要内容，如果未能解决你的问题，请参考以下文章

onclick时如何放下可拖动的div？

div元素拖动到特定位置时如何触发模态？

hmtl 手机上 div元素拖动

如何使用 jquery ui 使拖动和克隆的元素再次可拖动？

发出可拖动元素中包含的拖动元素

设置可拖动元素的边界