How to set jQuery draggable min max-left and min max-right

Question

I made a copy of JSbin for practice, JSbin link here, actual site link here.

This is just a practice for making the front-end of websites as I just started learning web dev little over a week ago. You can put in html, css and javascript in the editboxes, and a page spit out in Output just like the actual JSbin.

But the problem is that you can resize the divs pass other divs.

My idea to prevent this from happening is:
1. get the editboxes' current positions
2. store the left/right position of the editbox if resized to 10% window width
3. set the min/max left and right for the draggable div

And hence the question. How do I set the max-left/right for the draggable.

Also, any idea on why the draggable before Output div is diificult to drag to the right.

Edit: How the site is structured. When you drag the .drag (.resize in my JSbin code), it changes its left and right div's left and right. And the draggables are contained in the #main's div.

<div id="main>
  <div id="HTML"></div>
                
  <div class="drag"></div> //drag this left and right to change the right of the HTML and left of CSS
                     
  <div id="CSS"></div>
               
  <div class="drag"></div> //drag this left and right to change the right of the Css and left of JavaScript
                     
  <div id="JavaScript"></div>
                      
  <div class="drag"></div> //drag this left and right to change the right of the JavaScript and left of Output
                     
  <div id="Output"></div>
</div>

 

Answer 1

How to set jQuery draggable min/max-left and min/max-right

1. get the editboxes' current positions.
2. store the left/right position of the editbox if resized to 10% window width.
3. set the min/max left and right for the draggable div