Question

For some reason the placeholder for my sortable items is about 10px. All my sortable items have different heights. How can I change the height of each placeholder to match the item being moved?

Answer 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