jQuery UI Sortable - 奇怪的行为 - 移动时从窗口顶部掉落的项目答案

【问题标题】：jQuery UI Sortable - Strange behaviour - items falling from the top of window on movejQuery UI Sortable - 奇怪的行为 - 移动时从窗口顶部掉落的项目
【发布时间】：2013-09-25 11:12:12
【问题描述】：

我在使用 jQuery UI 可排序时遇到了一些非常奇怪的行为。

我正在使用 jQuery 1.10.2 和 jQuery UI 1.10.3。

在 FF 中，第一次移动项目时，它可以正常工作，但在移动一次后，再次移动它时，它会从窗口顶部跳到光标下方，而不是从它的位置。

在 Chrome 中，无论您之前是否移动过它，都会发生这种情况。

这是我的 HTML：

<ul class="trackListings" id="trackListings">
    <li class="header">
        <div class="number">#</div>
        <div class="title">Title</div>
        <div class="length">Length</div>
        <div class="plays">Plays</div>
        <div class="adds">Adds</div>
        <div class="toggle"></div>
    </li>
    <li id="369">
        <div class="number">1</div>
        <div class="title">Test track</div>
        <div class="length">1:25</div>
        <div class="plays">0</div>
        <div class="adds">0</div>
        <div class="toggle"><span>&gt;</span></div>
        <div class="actions">Purchase Link: <input placeholder="e.g iTunes, Amazon etc" value="" type="text"></div>
    </li>

    <li id="370">
        <div class="number">2</div>
        <div class="title">Test track 2</div>
        <div class="length">1:29</div>
        <div class="plays">0</div>
        <div class="adds">0</div>
        <div class="toggle"><span>&gt;</span></div>
        <div class="actions">Purchase Link: <input placeholder="e.g iTunes, Amazon etc" value="" type="text"></div>
    </li>
</ul>

适当的 CSS：

.trackListings{
    padding:0;

}
.trackListings li{
    line-height: 50px;
    display: inline;
    display: block;
    border-bottom: 1px solid #afb2b4;
    position: relative;
    font-size: 21px;
    color: #000;
    transition:.25s linear all;
}

.trackListings li:after{
    clear: both;
    display: block;
    content: " ";
}
.trackListings li div{
    float: left;
}
.trackListings li div.number{
    text-align: center;
    width: 45px;
}

.trackListings li div.title{
    width: 465px;
    padding-left: 20px;
}

.trackListings li div.length{
    width: 110px;
}

.trackListings li div.plays{
    width: 100px;
}

.trackListings li div.adds{
    width: 210px;
}

.trackListings li div.toggle span{
    font-size: 30px; 
    display: block;
}

.trackListings li.active div.toggle span{
    color: #e35b29;
}
.trackListings li div.actions{
    display: none;
}

并像这样初始化它：

$('#trackListings').sortable({
                items: 'li:not(.header)'
            });

我尝试删除包含的 div 并在 lis 上设置固定高度。也尝试过包装在相对定位的 div 中，但这也导致每次在 FF 中都会发生这种情况。

【问题讨论】：

如果这还没有解决，你能发一个小提琴吗

标签： jquery jquery-ui jquery-ui-sortable

【解决方案1】：

不久前我遇到了类似的情况，并在此处记录：http://blog.ricky-stevens.com/jquery-sortable-offset-bug/，此后已在此处进行了讨论：http://forum.jquery.com/topic/sortable-offset-when-element-is-dragged-and-page-scrolled-down-ff

这可能是相关的。如果您必须在页面上滚动，这会影响 jQuery Sortable。尝试调整 body 标签上的 scroll-y 属性。

【讨论】：

不幸的是，这是一个不同的问题。但是我注意到，当一个项目移动到一个新位置时，它的位置是：相对的；左：0px；顶部：0px；当我在萤火虫中删除它时，我可以将它从当前位置重新拖动....

【解决方案2】：

通过使用可排序的helper:"clone" 选项，我能够修复 FF 中的行为。它在某种程度上修复了 chrome，但仍然不完美

【讨论】：

【解决方案3】：

我知道这是一个非常古老的问题，但我今天遇到了这个问题。解决方法是删除：

position: relative;

来自列表项上的 css。我希望这对某人有所帮助。

【讨论】：

【解决方案4】：

我知道这是一个非常古老的问题，但对我来说，它通过不使用“revert: true”来修复它。

【讨论】：