0

I am using the jQuery UI sortable function on my page to sort a list of div, witch works fine. My problem is that when i start dragging a div or after I sort one or more divs, it breaks my design. Is there any way to prevent or fix this design issue when using jQuery UI sortable?

<div class="gentbl">
    <div class="genrw">
        <div class="rwttl">Title</div>
        <div class="rwelm">Element</div>
    </div>
    <div class="genrw">
        <div class="rwttl">Title</div>
        <div class="rwelm">Element</div>
    </div>
    <div class="genrw">
        <div class="rwttl">Title</div>
        <div class="rwelm">Element</div>
    </div>
    <div class="genrw">
        <div class="rwttl">Title</div>
        <div class="rwelm">Element</div>
    </div>
</div>

$(function(){
    $('.gentbl').sortable({
        revert: true
    });
    $('.gentbl').disableSelection();
});

Working example: HERE

user1885099
  • 130
  • 2
  • 6
  • 28
  • This is because of inserted `.ui-sortable-placeholder`. Just force all `.genrw` have the same `vertical-align`, [example](http://jsfiddle.net/j2fhvL57/1/). – panfil Jun 20 '15 at 12:01
  • And if you are about space between that changes thats because you have newlines and spaces between them in original html. You can see how deal with them [here](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements). Fixed [example](http://jsfiddle.net/j2fhvL57/2/). – panfil Jun 20 '15 at 12:10

0 Answers0