How to make div sortable inside of a row class?

Question

Well basically I have a container that I want to be able to sort all the divs inside of it :

<div class="container">
    <div id ="sortable" class="row ui-sortable">
    <div class="boxEncar">
        <div class="col-md-4">
            <?php zone_print("middle1") ; ?>
        </div>
        <div class="col-md-4">
            <?php zone_print("middle2") ; ?>
        </div>
        <div class="col-md-4">
            <?php zone_print("middle3") ; ?>
        </div>
    </div>
    </div>
</div>

And here's my call to sortable class:

jQuery(document).ready(function() {
    jQuery('#sortable').sortable();
}); 

The issue here is that the whole container get sortable while i just need col-md-4 to be so! Any way I can achieve this? Thanks.

Answer 1

You have to select the parent of the sortable items!

jQuery('#sortable > .boxEncar').sortable();

Answer 2

Try to use:

jQuery('#sortable').find('.col-md-4').sortable();

instead of:

jQuery('#sortable').sortable();