jQuery UI 정렬 가능 (부트 스트랩 3 그리드 축소판)

Question

부트 스트랩 3 그리드로 정렬 가능한 플러그인 jQuery UI에 몇 가지 문제점이 있습니다. 자리 표시자를 올바른 위치에 배치 할 수는 없지만 표시됩니다. 또한 sortable 동작을보다 정확하게 만들 수 있습니다. 동작이 느려지는 경우 동작이 수행되지 않는 경우가 있습니까?

<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

내 문제는 환영 해결하기 위해 어떤 제안. 감사합니다

Answer 1

자리 표시 자의 너비와 높이 및 항목 속성을 지정해야합니다. 자리 표시와 실제 엄지 손가락 열이 정확한이 없기 때문에

.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%; 
} 

데모 링크 http://www.bootply.com/PX4Q9h4vSD#

(COL-MD-3 클래스의 같은 속성) (자리 표시 자 어떤 정렬 문제가 발생할 수 있습니다 같은 높이)