Search code examples
javascriptjqueryhtmldraggableresizable

Resizable is causing other elements below it to move

I am building a UI where I need to have two or more resizable and draggable DIVs. The problem that I am facing is that when you resize a div all the other divs that were originally below it are moving(changing their position). Please see https://jsfiddle.net/2f8g93nn/4/ where I wrote an example of what I mean. In that example if you moved the second div to the right and resized the first div the position of the second div will change.

HTML in jsfiddle.net:

<!doctype html>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="Element" id = "FirstDiv"  class="ui-widget-content">
  <p>First DIV</p>
</div>
<div class="Element" id = "SecondDiv" class="ui-widget-content">
  <p>Second DIV</p>
</div>

Javascript in jsfiddle.net:

   $(function() {
    $( ".Element" ).draggable();
     $( ".Element" ).resizable();   
  });

CSS in jsfiddle.net:

.Element { 
    width: 150px;
    height: 150px;
    padding: 0.5em;
    border:1px solid black; 
}

At the begining Second div is below first div

We moved the second div to the right

By increasing the size of the first div the position of the second div changed

Solution

  • For my opinion and make thing simple, why don't you use tag...

    Here is the Demo code: https://jsfiddle.net/SeokKuan/2f8g93nn/8/

     <textarea  style="height: 100px;" placeholder="First Content"></textarea><br>

<textarea  class="form-control" style="height: 100px;" placeholder="Second Content"></textarea>

    nn/8/