jQuery UI Sortable e Bootstrap 3 griglia fluida sfarfallio e rottura

Question

Ho un layout di griglia 3 x 3 di base basato su Bootstrap 3. Ho bisogno che sia fluido, quindi ho lasciato fuori la classe 'contenitore'. Ho bisogno che le colonne all'interno della riga siano ordinabili usando le funzionalità ordinabili di jquery.

Tutto funziona correttamente, ma l'ultima colonna di ogni riga si comporta in modo wierdly quando viene trascinata. Il design si interrompe facendo clic su una delle ultime colonne.

Ho provato la soluzione di impostare il margine dei segnaposto su 0 ma non riesco a farlo funzionare.

Qualsiasi aiuto sarebbe molto apprezzato! Grazie!

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

Prova questo

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

Provare per inizializzare widget di ordinabili con le seguenti impostazioni:

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

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