jQuery UI 可使用引导 3 网格缩略图进行排序

Question

我对使用bootstrap 3网格排序的插件jQuery UI有一些问题。我无法将占位符放在正确的位置，但我会显示。此外，您可以使可排序的动作更准确，有时不执行动作，也许通过减慢动作？

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

演示

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

Answer 1

您需要指定占位符的宽度和高度以及项目的属性。（与 Col-MD-3 类相同的属性）

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

（占位符

可能会导致一些对齐问题，因为占位符和实际拇指列的高度不完全相同）