如何约束 div 拖动空间?(没有jQuery)

Question

我想限制可拖动div在另一个div内的移动;这是通过下面的代码完成的：

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<style>
#modalPar { width: 300px; height: 150px; padding: 0.5em; border: 1px solid black}
#myModal {width: 200px; border: 1px solid black}
</style>
<script>
$(function() {
$("#modalPar").draggable();
$("#myModal").draggable({containment: "parent"});});
</script>
<div id="modalPar">Parent
<div id="myModal">Child</div></div>

我想在没有jQuery的情况下完成同样的事情。尝试了以下方法：

dragElement(document.getElementById("myModal"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;} 
else {elmnt.onmousedown = dragMouseDown;}
function dragMouseDown(w) {
w = w || window.event;
w.preventDefault();
pos3 = w.clientX;
pos4 = w.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;}

function elementDrag(w) {
w = w || window.event;
w.preventDefault();
pos1 = pos3 - w.clientX;
pos2 = pos4 - w.clientY;
pos3 = w.clientX;
pos4 = w.clientY;
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;}}

#myModal {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
top: 0; right: 0; width: 110px; height: 160px}
#myModalheader {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;}

<div id="myModal">
<div id="myModalheader">Click here to move</div>
<p>Move</p><p>this</p><p>DIV</p>
</div>

div 可以通过拖动标头拖动，该标头包含在正在拖动的完整div 中，但会溢出父div。如何使用 JavaScript 防止这种情况发生？

感谢帮助。

Answer 1

这是一个选项;我不能建议它像jQuery一样健壮或浏览器兼容，但它应该显示一般的想法。我正在使用句柄变量dragged，并使用了几个类来区分draggable和draggable-child元素。有一个简单的儿童边界检查。对于填充和其他您要考虑的事情，这是非常可调整的。

let dragged;
document.addEventListener("mouseup", e => dragged = null);
document.addEventListener("mousedown", e => {
if (e.target.classList.contains("draggable-handle")) {
dragged = e.target.parentElement;
}
});
document.addEventListener("mousemove", e => {    
if (dragged) {
e.preventDefault();
const x = +(dragged.style.left.match(/-?d+/g) || 0) + e.movementX;
const y = +(dragged.style.top.match(/-?d+/g) || 0) + e.movementY;
const w = dragged.getBoundingClientRect().width;
const h = dragged.getBoundingClientRect().height;
if (dragged.classList.contains("draggable-child")) {
const r = dragged.parentElement.getBoundingClientRect();
const pw = r.width;
const ph = r.height;
if (x < 0 || y < 0 || x + w >= pw || y + h >= ph) {
return;
}
}
dragged.style.top = `${y}px`;
dragged.style.left = `${x}px`;
}
});

#modalPar {
width: 300px;
height: 150px;
border: 1px solid black
}
#myModal {
width: 200px;
height: 100px;
border: 1px solid black
}
.draggable, .draggable-child, .draggable-handle {
position: absolute;
}
.draggable-handle {
padding: 0.3em;
background: black;
color: white;
cursor: grab;
}

<div id="modalPar" class="draggable">
<div class="draggable draggable-handle">[drag]</div>
<div id="myModal" class="draggable draggable-child">
<div class="draggable draggable-handle">[drag]</div>
</div>
</div>