jquery-ui sortable placeholder wrong position

Question

I need to sort bootstrap blocks and I have some problems with placeholder.

$('.buildBlockContainer').sortable({
  handle: '.sortableHandler',
  connectWith: '.buildBlockContainer',
  cancel: '',
  placeholder: 'buildBlockPlaceholder',
  start: function(e, ui) {
    ui.placeholder.height(ui.item.height());
    ui.placeholder.width(ui.item.width());
  }
});

Full example here: https://jsfiddle.net/ShinShil/74grstLs/

Answer 1

Firstly placeholder must have the same float, position and display styles as item.

Secondary the width of bootstrap cols have paddings and they not in width, but in offsetWidth: ui.placeholder.width(ui.item[0].offsetWidth)

complete example https://jsfiddle.net/ShinShil/0d22bo83/5/