JQuery UI sortable with bootstrap 3 grid sketch

Question

I have some problems with the custom jQuery UI of the plugin with the bootstrap 3 grid. I cannot place the place in the right place, but I will show it. In addition, you can make the action more ordered, sometimes the action is not performed, perhaps by slowing down 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 height of the placeholder and the properties of the elements. (same col-md-3 class properties)

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

(a substitute may cause some alignment problem because the placeholder and the actual thumb column do not have the same height)