jQuery UI ordinabile con miniatura griglia bootstrap 3

Question

Ho alcuni problemi con il plugin jQuery UI ordinabile con griglia di bootstrap 3. Non riesco a posizionare il segnaposto nel posto giusto, ma mi farò vedere. Inoltre, è possibile rendere più ordinabile l'azione di ordinabile, a volte l'azione non viene eseguita, forse rallentando l'azione?

<div class="row"> 
<div class="col-md-12"> 

    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h1 class="panel-title">Photos</h1> 
     </div> 
     <div class="panel-body"> 

      <div class="row sortable"> 

       <div class="col-md-3 thumb"> 
        <a class="thumbnail" href="#"> 
         <img class="img-responsive" src="http://placehold.it/400x300" alt="">1 
        </a> 
       </div> 
       <div class="col-md-3 thumb"> 
        <a class="thumbnail" href="#"> 
         <img class="img-responsive" src="http://placehold.it/400x300" alt="">2 
        </a> 
       </div> 
       <div class="col-md-3 thumb"> 
        <a class="thumbnail" href="#"> 
         <img class="img-responsive" src="http://placehold.it/400x300" alt="">3 
        </a> 
       </div> 
       <div class="col-md-3 thumb"> 
        <a class="thumbnail" href="#"> 
         <img class="img-responsive" src="http://placehold.it/400x300" alt="">4 
        </a> 
       </div> 
       <div class="col-md-3 thumb"> 
        <a class="thumbnail" href="#"> 
         <img class="img-responsive" src="http://placehold.it/400x300" alt="">5 
        </a> 
       </div> 
       <div class="col-md-3 thumb"> 
        <a class="thumbnail" href="#"> 
         <img class="img-responsive" src="http://placehold.it/400x300" alt="">6 
        </a> 
       </div> 
       <div class="col-md-3 thumb"> 
        <a class="thumbnail" href="#"> 
         <img class="img-responsive" src="http://placehold.it/400x300" alt="">7 
        </a> 
       </div> 
       <div class="col-md-3 thumb"> 
        <a class="thumbnail" href="#"> 
         <img class="img-responsive" src="http://placehold.it/400x300" alt="">8 
        </a> 
       </div> 
      </div> 

     </div> 

     </div> 
    </div> 
</div> 

JS

$(".sortable").sortable({ 
    items  : 'div:not(.unsortable)', 
    placeholder : 'sortable-placeholder' 
}); 
$(".sortable").disableSelection(); 

CSS

.sortable-placeholder { 
    margin-left: 0 !important; 
    border: 1px solid #ccc; 
    background-color: yellow; 
    -webkit-box-shadow: 0px 0px 10px #888; 
    -moz-box-shadow: 0px 0px 10px #888; 
    box-shadow: 0px 0px 10px #888; 
} 

DEMO

Ogni suggerimento per risolvere il mio problema è il benvenuto. Grazie

Answer 1

È necessario specificare la larghezza e l'altezza del segnaposto e le proprietà degli elementi. (Le stesse proprietà di col-md-3 classe)

.sortable-placeholder { 
    margin-left: 0 !important; 
    border: 1px solid #ccc; 
    background-color: yellow; 
    -webkit-box-shadow: 0px 0px 10px #888; 
    -moz-box-shadow: 0px 0px 10px #888; 
    box-shadow: 0px 0px 10px #888; 
    float: left; 
    width: 25%; 
    height: 0px; 
    padding-bottom: 20%; 
} 

Dimostrazione collegamento http://www.bootply.com/PX4Q9h4vSD#

(il segnaposto potrebbe causare un certo problema di allineamento perché il segnaposto e la colonna pollice attuale non ha l'esatta stessa altezza)