Jquery UI 可排序列表正在抽搐答案

【问题标题】：Jquery UI sortable list is twitchingJquery UI 可排序列表正在抽搐
【发布时间】：2013-06-09 01:42:45
【问题描述】：

我使用带有引导流体布局的 jquery UI 可排序列表。一切都很好，但是在移动事件中，一些“li”移动了大约 10 个像素。请参阅演示以获得更好的理解。 http://jsfiddle.net/6UkdR/3/

<div class="row-fluid">
    <ul id="sortable">
        <li class="ui-state-default span3">
            ....
        </li>
        ....
    </ul>
</div>
#sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
#sortable .ui-state-default {
    min-height: 350px;
}
.row-fluid [class*="span"]:nth-child(5n) {
    margin-left: 0;
}
.ui-sortable-placeholder {
    margin-left: 0 !important;
}
$("#sortable").sortable({
    cursor: 'move',
    scroll: 'false',
    opacity: 0.9
}).disableSelection();

【问题讨论】：

标签： jquery jquery-ui twitter-bootstrap jquery-ui-sortable fluid-layout

【解决方案1】：

这是因为 margin-top:10px; 赋予了 .thumbnail 类。删除它，它工作正常。如果您仍然想要上边距，请改为应用到其父 li。

【讨论】：

【解决方案2】：

删除标签“<li>”之间的所有空格

<div class="row-fluid">
        <ul id="sortable">
            <li class="ui-state-default span3">
                ....
            </li><!-- Remove space
    --><li class="ui-state-default span3">
                ....
            </li><!-- Remove space
    --><li class="ui-state-default span3">
                ....
            </li>
        </ul>

并将样式添加到 li { overflow: hidden;}

或为您的演示添加样式

span.span3{overflow: hidden;float:none!important;display:inline-block!important;margin-left:0!important;margin-right:1.5%;}

【讨论】：