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

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#

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

jQuery UI可以使用bootstrap 3网格缩略图进行排序

1 个答案: