Databases
StackOverflow2013
Postsdbo
POImplement Jquery UI sortable and resizable together
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POImplement Jquery UI sortable and resizable together
    text
    copied!<p>I"m trying to implement a sort and resize for a couple of divs in a grid like layout. </p> <p>This is an example <a href="http://jsfiddle.net/dmdGj/21/" rel="nofollow">fiddle</a> </p> <p>But the problem is once I resize(make the div bigger) and then when I try to sort the sort is not working properly. Instead of aligning properly it is overflowing out off the other div where the inner-divs are placed. </p> <p>Resize is not working with fiddle. This is the correct <a href="http://jsfiddle.net/dmdGj/30/" rel="nofollow">result</a> that i need to achieve after resizing(assuming max-width resizable is the width of outer div). But in my code if i try to resize, the elements are overlapping and again if I place it in the right side, the element is overflowing out of the outer container div. (In the <a href="http://jsfiddle.net/dmdGj/30/" rel="nofollow">result</a>) it is not happenning, try keeping div{3} at position of div{2} </p> <p>I'm using bootstrap fluid layout. so the divs are sized with span class. this is the code that i'm using</p> <pre><code>&lt;div class="row-fluid" id="sortable"&gt; &lt;div class="span6 sort_container"&gt; &lt;div class="well"&gt;aaaaaaaaaaaaa&lt;/div&gt; &lt;/div&gt; &lt;div class="span6 sort_container"&gt; &lt;div class="well"&gt;bbbbbbbbbbbbb&lt;/div&gt; &lt;/div&gt; &lt;div class="span6 sort_container" &gt; &lt;div class="well"&gt;ccccccccccc&lt;/div&gt; &lt;/div&gt; &lt;div class="span6 sort_container"&gt; &lt;div class="well"&gt;dddddddddddd&lt;/div&gt; &lt;/div&gt; &lt;div class="span6 sort_container"&gt; &lt;div class="well"&gt;eeeeeeeeeeee&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script&gt; $(document).ready(function() { $(function() { $( "#sortable" ).sortable(); }); $(function() { $('.well').resizable(); }); }); &lt;/script&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload