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


Tags: javascript,jquery,html,css,jquery-ui

Problem :

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>



Solution :

By taking advantage of jQuery Ui's built in draggable event which gives us position information and also allows us to set position on drag.

I came up with the following solution:

var dragDistance = 100;

$(".resize").draggable({
  axis: "x", 
  containment: "parent",
  drag: function( event, ui){ 

    ui.position.left = Math.min( ui.position.left,  ui.helper.next().offset().left + ui.helper.next().width()-dragDistance); 
    ui.position.left = Math.max(ui.position.left, ui.helper.prev().offset().left + dragDistance);

   resize();

  }
});

I removed your onDrag function in the process so it wouldn't interfere.

See the bin here:

JSBin

NOTES:

  1. I haven't looked into it and maybe its just a JSBin issue because I can't reproduce it in your live site. But if the boundary lines disappear while you are dragging the code won't work. You'll probably have to increase the drag distance to the point where the lines don't disappear while dragging.

  2. You may notice you have difficulty dragging the Output box that seems to be caused by the Iframe you have inside. If I comment out the IFrame I can drag it just fine. I haven't looked for a solution but perhaps experiment with some padding or margins so that the Iframe is not pegged so closely against the border. Or maybe if you detached it from the DOM while dragging that would fix it.


    CSS Howto..

    how to make this “div” always visible to users

    How can we make responsive height of header

    how to place the images exactly in menu position

    How to solve Firefox 2.0 cross browser issues?

    How to time the effect of a css look in javafx?

    how can I center this menu with CSS

    Preload all CSS images while showing a preloader

    How can I align this?

    how to select :after element using jquery

    How to make input+label in a form appear one by one?

    How do I set background-image height using jQuery?

    CSS - How to float correctly into pseudocolumns

    selectCheckboxMenu: items are shown with bold font

    How to re-size constantly changing text to fit in a div with a fixed width, based on the changing of a