jQuery UI Sortable i Bootstrap 3 fluid migotanie i łamanie sieci

Question

Mam podstawowy układ siatki 3 x 3 w oparciu o Bootstrap 3. Potrzebuję go płynny, stąd pominięto klasy "pojemnik". Potrzebuję kolumn w rzędzie do sortowania za pomocą jquery ui sortable function.

Wszystko działa dobrze, ale ostatnia kolumna każdego wiersza zachowuje się dziwnie po przeciągnięciu. Projekt pęka po kliknięciu dowolnej z ostatnich kolumn.

Próbowałem rozwiązać ustawienie marginesu zastępczego na 0, ale nie mogę sprawić, żeby działało.

Każda pomoc będzie bardzo ceniona! Dzięki!

JSFiddle

<div class = 'row'> 
     <div class = 'col-xs-4'> 
      <h2>Heading</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
       Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
       dolor, in sagittis nisi.</p> 
      <p><a href="#" class="btn">View details »</a></p> 
     </div> 
     <div class = 'col-xs-4'> 
      <h2>Heading</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
       Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
       dolor, in sagittis nisi.</p> 
      <p><a href="#" class="btn">View details »</a></p> 
     </div> 
     <div class = 'col-xs-4'> 
      <h2>Heading</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
       Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
       dolor, in sagittis nisi.</p> 
      <p><a href="#" class="btn">View details »</a></p> 
     </div> 
    </div> 
    <div class = 'row'> 
     <div class = 'col-xs-4'> 
      <h2>Heading</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
       Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
       dolor, in sagittis nisi.</p> 
      <p><a href="#" class="btn">View details »</a></p> 
     </div> 
     <div class = 'col-xs-4'> 
      <h2>Heading</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
       Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
       dolor, in sagittis nisi.</p> 
      <p><a href="#" class="btn">View details »</a></p> 
     </div> 
     <div class = 'col-xs-4'> 
      <h2>Heading</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
       Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
       dolor, in sagittis nisi.</p> 
      <p><a href="#" class="btn">View details »</a></p> 
     </div> 
    </div> 
    <div class = 'row'> 
     <div class = 'col-xs-4'> 
      <h2>Heading</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
       Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
       dolor, in sagittis nisi.</p> 
      <p><a href="#" class="btn">View details »</a></p> 
     </div> 
     <div class = 'col-xs-4'> 
      <h2>Heading</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
       Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
       dolor, in sagittis nisi.</p> 
      <p><a href="#" class="btn">View details »</a></p> 
     </div> 
     <div class = 'col-xs-4'> 
      <h2>Heading</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
       Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
       dolor, in sagittis nisi.</p> 
      <p><a href="#" class="btn">View details »</a></p> 
     </div> 
    </div> 



<script> 
$('.row').sortable({ 
    connectWith: '.row', 
    placeholder: 'placeholder' 
}); 
</script> 
<style> 
.placeholder {margin-left: 0 !important; border: 1px solid #ccc} 
</style> 

Answer 1

Spróbuj

http://jsfiddle.net/WwFuS/32/

JS

$('.row').sortable({ 
    placeholder: 'col-xs-4' 
}); 

HTML

<div class = 'row'> 
    <div class = 'col-xs-4'> 
     <h2>Heading1</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
      Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
      dolor, in sagittis nisi.</p> 
     <p><a href="#" class="btn">View details »</a></p> 
    </div> 
    <div class = 'col-xs-4'> 
     <h2>Heading2</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
      Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
      dolor, in sagittis nisi.</p> 
     <p><a href="#" class="btn">View details »</a></p> 
    </div> 
    <div class = 'col-xs-4'> 
     <h2>Heading3</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
      Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
      dolor, in sagittis nisi.</p> 
     <p><a href="#" class="btn">View details »</a></p> 
    </div> 
    <div class = 'col-xs-4'> 
     <h2>Heading4</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
      Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
      dolor, in sagittis nisi.</p> 
     <p><a href="#" class="btn">View details »</a></p> 
    </div> 
    <div class = 'col-xs-4'> 
     <h2>Heading5</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
      Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
      dolor, in sagittis nisi.</p> 
     <p><a href="#" class="btn">View details »</a></p> 
    </div> 
    <div class = 'col-xs-4'> 
     <h2>Heading6</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
      Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
      dolor, in sagittis nisi.</p> 
     <p><a href="#" class="btn">View details »</a></p> 
    </div> 
    <div class = 'col-xs-4'> 
     <h2>Heading7</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
      Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
      dolor, in sagittis nisi.</p> 
     <p><a href="#" class="btn">View details »</a></p> 
    </div> 
    <div class = 'col-xs-4'> 
     <h2>Heading8</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
      Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
      dolor, in sagittis nisi.</p> 
     <p><a href="#" class="btn">View details »</a></p> 
    </div> 
    <div class = 'col-xs-4'> 
     <h2>Heading9</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
      Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
      dolor, in sagittis nisi.</p> 
     <p><a href="#" class="btn">View details »</a></p> 
    </div> 
</div> 

Answer 2

Spróbuj zainicjować sortable widget z następującymi ustawieniami:

$('.row').sortable({ 
    helper: 'clone', 
    placeholder: 'col-xs-4' 
}); 

http://jsfiddle.net/0bzwc61d/1/