jQuery UI Sortable and Bootstrap grid
<p>I have created a dashboard grid in BS and want to be able to drag the tiles around using Sortable - this in itself works fine but the behaviour is really unpredictable.</p>

<p>I have a 6 x 4 grid and, for example, if I move an item from row 2 to row 1, then the item moves into place correctly but the item it is replacing jumps down to row 2 and everything else moves down a row so I now end up with 6 x 5 grid.</p>

<p>Further, in most cases, I am not actually able to move items directly into row 2 so I need to then start moving all the other tiles around each of which also have similar issues to above making it worse again.</p>

<p>The code I am using for sortable is:</p>

<pre><code>$(function() {
    $(".sortable-heading").sortable({
        connectWith: '.heading-sortable',
        items: '.panel',
        helper: 'original',
        cursor: 'move',
        handle: '.panel-title, [data-action=move]',
        revert: 100,
        grid: [ 10, 10 ],
        delay: 150,
        containment: '#home-dash',
        forceHelperSize: true,
        opacity: 0.7,
        placeholder: 'sortable-placeholder',
        forcePlaceholderSize: true,
        tolerance: 'pointer',
        start: function(e, ui){
            ui.placeholder.height(ui.item.outerHeight());
        }
    }); 
}); 
</code></pre>

<p>Rather than posting all the HTML code, I have created a fiddle showing this in action.</p>

<p>If you move the red panel into the top row you will see the behaviour of adding an additional row and if you then try to drag the blue panel into the now second row it is not able to be done easily.</p>

<p><a href="https://jsfiddle.net/mk3whz43/2/" rel="nofollow">https://jsfiddle.net/mk3whz43/2/</a></p>