Giao diện người dùng jQuery có thể sắp xếp với hình thu nhỏ lưới bootstrap 3

Question

Tôi có một số vấn đề với plugin jQuery UI có thể sắp xếp với lưới khởi động 3. Tôi không thể đặt trình giữ chỗ ở đúng vị trí, nhưng tôi sẽ hiển thị. Ngoài ra, bạn có thể thực hiện hành động có thể sắp xếp chính xác hơn, đôi khi hành động không được thực hiện, có lẽ bằng cách làm chậm hành động?

<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

Bất kỳ gợi ý để giải quyết vấn đề của tôi được chào đón. Cảm ơn

Answer 1

Bạn cần chỉ định chiều rộng và chiều cao của trình giữ chỗ và thuộc tính của các mục. (Các tính chất tương tự của col-md-3 lớp)

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

Demo link http://www.bootply.com/PX4Q9h4vSD#

(giữ chỗ có thể gây ra một số vấn đề liên kết vì giữ chỗ và cột ngón tay cái thực tế không có chính xác cùng chiều cao)