jQuery UI sortable with bootstrap 3 grid thumbnail

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)