jquery sortable placeholder height problem

Solution 1:

I usually solve this by binding a callback that sets the height of the placeholder to the height of the item being sorted to the start event. It's a simple solution that gives you fine-grained control over how you want your placeholder to be displayed.

$( ".column" ).sortable({
    connectWith: ".column",
    start: function(e, ui){
        ui.placeholder.height(ui.item.height());
    }
});

See updated test case

Solution 2:

Have you tried setting the forcePlaceholderSize:true property? Have a read on the jQuery UI Sortable documentation page.

Solution 3:

Instead of using "ui.item.height()" you can use "ui.helper[0].scrollHeight" to stable result when drag an item from external container too.

$( ".column" ).sortable({
    connectWith: ".column",
    start: function(e, ui){
        ui.placeholder.height(ui.helper[0].scrollHeight);
    }
});