Jquery sortable issue on empty bootstrap column

See more:

Javascript

jQuery

bootstrap

, +

I've got a punch of bootstrap panels inside of some columns. Now I'm trying to arrange this panels using jquery sortable but I can not bring it to work correctly.

see the jsfiddle: Edit fiddle - JSFiddle

My issue: If I drag a panel in the left hand an drop it to the right everything works great. But after that I want to be able to drag a panel from the right side back to the empty column on the left side but even the placeholder won't go to the left side.

I've set the

padding-top: 10px

property of the columns to actually leave them in the empty space.

My javascript looks like this:

$("#container-wrapper").sortable({
  connectWith: ".connectedSort",
  items: "div.panel",
  tolerance: 'pointer',
  revert: true,
  placeholder: 'placeholder',
  forceHelperSize: true,
  zIndex: 9999
}).disableSelection();