jQuery UI sortable with bootstrap 3 grid thumbnail - jquery-ui

Question

I have some problems with the plugin jQuery UI sortable with bootstrap 3 grid.
I can't place the placeholder in the correct place, but I will show up.
Also, you could make the action of sortable more accurate, sometimes the action is not performed, perhaps by slowing the 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
Any suggestion to solve my problem is welcome. Thanks

Answer 1

You need to specify the width and the height of the placeholder and the properties of the items. (the same properties of col-md-3 class)
.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#
(the placeholder might cause some alignment issue because the placeholder and the actual thumb column doesn't have the exact same height)