Attempting to prevent the draggable items from overflowing beyond the body.
Succeeded in limiting movement on the top and left sides.
Encountering difficulty restricting motion on the right side and bottom.
e.pageX -= e.offsetX;
e.pageY -= e.offsetY;
// horizontal constraint
if (e.pageX - dragoffset.x < 0) {
offsetX = 0;
} else if (e.pageX + dragoffset.x > document.body.clientWidth) {
offsetX = document.body.clientWidth - e.target.clientWidth;
} else {
offsetX = e.pageX - dragoffset.x;
}
// vertical constraint
if (e.pageY - dragoffset.y < 0) {
offsetY = 0;
} else if (e.pageY + dragoffset.y > document.body.clientHeight) {
offsetY = document.body.clientHeight - e.target.clientHeight;
} else {
offsetY = e.pageY - dragoffset.y;
}
el.style.top = offsetY + "px";
el.style.left = offsetX + "px";
}Experiencing erratic behavior with draggable divs during movement. They only stop accurately at the right and bottom when the text inside is selected.