Limiting a draggable element within a container

I have made a div draggable without using the jquery ui library, but I want to make the draggable box, not to leave its container.

Here is my demo

$(document).ready(function() {
     var $dragging = null;
 
     $(document.body).on("mousemove", function(e) {
         if ($dragging) {
             $dragging.offset({
                 top: e.pageY,
                 left: e.pageX
             });
         }
     });
 
     $(document.body).on("mousedown", ".box", function (e) {
         $dragging = $(e.target);
     });
 
     $(document.body).on("mouseup", function (e) {
         $dragging = null;
     });
 });?
 

How to do this? Please NOTE, I am not using JQUERY UI.

---