jquery-ui - 可使用 bootstrap 3 网格缩略图排序的 jQuery UI

Question

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

<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

您需要指定占位符的宽度和高度以及项目的属性。 (与 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#

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