Javascript 拖动时jQueryUI可排序项的位置不正确

我有一个jQueryUI可排序列表，其中包含三个

引导

面板，面板1和面板2开始以正确的初始位置拖动，但是每当您尝试拖动面板3时，它都会落在面板1下，与光标偏移

HTML CSS

---

我也有同样的问题。我过去发现CSS样式

框大小：边框框引导集globaly可能会导致一些javascript库出现问题，据我所知，这就是本例中的问题。我想出了一个快速修复方法，将框大小设置回CSS2默认值
框大小：内容框用于列

不幸的是，这破坏了引导中的列布局，因为现在列的填充被添加到了百分比宽度上，所以我们的3列的宽度最终超过了100%。对于我的代码，我实际上不需要在列之间填充任何内容，所以我只需要在列上设置一个负边距来抵消额外的宽度

有关框大小CSS属性的详细信息，请参见：


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

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

你在哪个浏览器中测试这个？在chrome中，您的JSFIDLE为所有3个控件提供了正确的
左
位置panels@FabioG似乎只有当容器达到一定大小时才会发生。请查看这个@KyleNeedham，似乎只有宽度为650px的容器才会发生这种情况，但我不知道原因：。顺便说一句，你的小提琴链接没有更新。@ReCaptcha它发生在
650
-
680
-
710
每
30px+或-
@KyleNeedham一次，我用一个较旧版本的jQuery尝试了这个方法，看起来效果不错，然后。好主意，我没有想过要这么做。我不知道这样的函数和助手。需要学习的伟大知识。解决了我的可排序ui问题。你的小提琴可以工作，当我将它复制到一个空的laravel.blade时，它会弄糟..：/
$('#sortable').sortable({
    tolerance: 'pointer',
    handle: '.panel-heading',
    placeholder: 'col-xs-4 panel-al-placeholder',
    start: function (e, ui) {
        ui.placeholder.height(ui.item.children().height());
    }
});

ul {
    width: 650px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.panel-al-placeholder {
    margin-bottom: 18px;
    border:2px solid #f8e287;
    background:#fef9e7
}

<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>

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

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
}

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