Draggable child div in parent div boundaries in jquery + css

Question

I have a question which is pretty hard to explain, but I will try. I have a parent div, which is the size of the screen and I have child div which is bigger than the size of the screen, I need to make child div draggable, but in the boundaries of parent div. I hope you will understand what I mean :D Example Example2

    function mainMenu() {
        var base = 
    
        '<div id="notmovingdiv">'+
             '<div id="movingdiv">'</div>'+
        '</div>';
    
        $("#main_container").html(base);
    }

        #notmovingdiv::-webkit-scrollbar{
          display:none;
        }
        #notmovingdiv { 
         overflow: auto;
         width:100vw;
         height:100vh;
         left:0px;
         top:0px;
         position:absolute;
         cursor: default;
         display: flex;
         align-items: center;
         justify-content: center;
        }
    
        #movingdiv {
            width:400vw;
            height:400vh;
            position:absolute;
            cursor: default;
            display: flex;
            align-items: center;
            justify-content: center;
        }

<body>
   <div class="full-screen">
   <div id="main_container">
   </div>
</body>

Please provide enough code so others can better understand or reproduce the problem. — Community, Mar 23 '22 at 16:51
Yes, please show what you have tried as the smallest set of code which produces this and your specific one challenge with it here. NOT pictures of code, actual code. — Mark Schultheiss, Mar 23 '22 at 17:59
NOTE: thank you for the update with code. Are the syntax issues there the challenge or is that a copy/pastes issue only? — Mark Schultheiss, Mar 23 '22 at 18:01
its the copy/paste issue, everything is working, I have just removed a lot of things from the code because they are irrelevant. I just don't know how to make movingdiv draggable with the boundaries that i need — Burbonas, Mar 23 '22 at 18:20
I have found an old similar post, but there it lets the div go further than I need to and I wasn't able to change that. Take a look https://stackoverflow.com/questions/46279977/contain-a-large-draggable-child-div-inside-smaller-parent-div — Burbonas, Mar 23 '22 at 18:23
when you say "draggable" do you mean by a moving mouse held down (a proper drag) or would the trackpad slide (with no click) or mouse wheel be OK. If you don't need it to be a proper drag, you can simply set the size of the content container larger than the container, and use css overflow: scroll; on the container to allow you to move the displayed material, always inside the container. It will show scroll bars but these can be hidden if needed, — Dave Pritlove, Mar 27 '22 at 20:57

Draggable child div in parent div boundaries in jquery + css

0 Answers0