1

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でも毎回発生しました。

4

4 に答える 4

0

少し前にこれに似たものに出会い、ここに文書化されました: 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 プロパティを調整してみてください。

于 2013-09-25T11:17:57.020 に答える
0

これが信じられないほど古いことは知っていますが、今日この問題に遭遇しました。修正は削除することです：

position: relative;

リスト項目の CSS から。これが誰かに役立つことを願っています。

于 2018-09-05T14:41:26.970 に答える