How to add bottom and right constraints to a draggable element?

I have a function that allows any element to be dragged to a new position and become left and top-bounded to a parent div. I am confused on how I would apply the same logic to bounding the bottom and right to the parent div. Other stackoverflow questions that I have searched for do not address my issue.

function dragElement(element) {      let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;        if (document.getElementById(element.id + "-header")) {          // if present, the header is where you move the DIV from:          document.getElementById(element.id + "-header").onmousedown = dragMouseDown;      } else {          // otherwise, move the DIV from anywhere inside the DIV:          element.onmousedown = dragMouseDown;      }        function dragMouseDown(e) {          // get the mouse cursor position at startup:          pos3 = e.clientX;          pos4 = e.clientY;          document.onmouseup = closeDragElement;          // call a function whenever the cursor moves:          document.onmousemove = elementDrag;      }        function elementDrag(e) {          e.preventDefault();          // calculate the new cursor position:          pos1 = pos3 - e.clientX;          pos2 = pos4 - e.clientY;          pos3 = e.clientX;          pos4 = e.clientY;            const rect = document.querySelector("#viewDiv").getBoundingClientRect();          const minLeft = rect.left;          const minTop = rect.top;          const maxRight = rect.right;          const maxBottom = rect.bottom;          let calcTop = element.offsetTop - pos2;          let calcLeft = element.offsetLeft - pos1;            // set the element's new position          // use the rectangular boundaries of the viewDiv and the element's offsets as constraints          element.style.left = Math.min(Math.max(minLeft, calcLeft), maxRight) + "px";          element.style.top = Math.min(Math.max(minTop, calcTop), maxBottom) + "px";      }        function closeDragElement() {          // stop moving when mouse button is released:          document.onmouseup = null;          document.onmousemove = null;      }  }  

https://stackoverflow.com/questions/66947348/how-to-add-bottom-and-right-constraints-to-a-draggable-element April 05, 2021 at 09:38AM