jQuery UI排序引导3网格缩略图

我有一些与引导3网格排序插件jQuery UI的问题。我无法将占位符放在正确的位置，但我会显示出来。另外，您可以使排序的动作更加准确，有时不执行动作，也许是通过减慢动作？jQuery UI排序引导3网格缩略图

<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>

$(".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

任何建议解决我的问题是值得欢迎的。谢谢

来源

2014-12-04 Gus

您需要指定占位符的宽度和高度以及项目的属性。

.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类的同性质）（占位符可能会导致某些对齐问题，因为占位符和实际拇指列没有确切相同的高度）

来源

2016-12-16 21:45:16 Lauwrentius

jQuery UI排序引导3网格缩略图

回答

相关问题