我也遇到过类似的问题，将助手设置为克隆模式对我很有效：

$('#sortable').sortable({
    helper: 'clone'
});

我也有同样的问题。我发现在过去的CSS样式box-sizing: border-box;引导设置全局可能会导致一些JavaScript库的问题，它原来是在这种情况下的问题，据我所知。我提出了一个快速修复方法，将列的框大小设置回CSS 2默认的box-sizing: content-box;。
不幸的是，这对bootstrap中的列布局造成了严重破坏，因为列的填充现在被添加到百分比宽度上，所以我们的3列最终比100%宽。对于我的代码，我实际上不需要在列之间进行任何填充，所以我只在列上设置了一个负边距来抵消额外的宽度。
有关box-sizing CSS属性的更多信息，请参见：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Live demo

HTML

<ul id="sortable">
    <li class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading ui-sortable-handle">1</div>
            <div class="panel-body"></div>
        </div>
    </li>
    <li class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading ui-sortable-handle">2</div>
            <div class="panel-body"></div>
        </div>
    </li>
    <li class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading ui-sortable-handle">3</div>
            <div class="panel-body"></div>
        </div>
    </li>
</ul>

JavaScript

$('#sortable').sortable({
    tolerance: 'pointer',
    handle: '.panel-heading',
    start: function (e, ui) {
        ui.placeholder.height(ui.item.children().height());
    }
});

CSS

ul {
    width: 650px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.col-xs-4 {
    box-sizing: content-box;
    margin: 10px -16px;
}
.panel-al-placeholder {
    margin-bottom: 18px;
    background:#fef9e7
}

当用 Bootstrap 3处理旧页面时，如果发现页面滚动时顶部位置正在改变。
花了一些时间来弄清楚，我可以只添加'appendTo'的身体，然后修复的问题。

$("#sortable").sortable({
  appendTo: document.body,
  update: function(event, ui) {
       //some function();
  }
});

希望其他人用这些信息节省时间。