jQueryのUIソート可能なスクロール位置が

Question

をソートするときに、最初にこのほぼ同じ質問を確認してください「ジャンプ」ここで

はsortable list

持っを作成

• を再現する方法ですそれスクロール
• スクロールダウン
• リオーダーアイテム
• スクロール位置はここ

まで "ジャンプ" コード（JSFiddleでも参照）

Htmlの

<ul id="panel" class="scroll"> 
    <li class="content" style="background-color:red">item1</li> 
    <li class="content" style="background-color:green">item2</li> 
    <li class="content" style="background-color:blue">item3</li> 
    <li class="content" style="background-color:gray">item4</li> 
    <li class="content" style="background-color:yellow">item5</li>  
</ul>​ 

です

JavaScriptの

$(function() { 
    $("#panel").sortable({ 
     items: ".content", 
     forcePlaceholderSize: true 
    }).disableSelection(); 
    $(".content").disableSelection(); 

});​ 

ここでCSS

.scroll{ 
    overflow: scroll; 
    border:1px solid red; 
    height: 200px; 
    width: 150px; 
} 
.content{ 
    height: 50px; 
    width: 100%; 
} 
​ 

コードは（運を）

をaccepted answerの概念を試した後、私は理解しようとすることができます（JSFiddle中）でありますなぜそれが起こるのか（速い秒の間にリストを取得する「短縮」）、プレースホルダやヘルパーを使用してそれを回避しようとするすべての試みがうまくいかなかったr。私は私が試した

ブラウザ運で "スクロール" オプションのほぼすべての順列を試した感じ

IE9、Firefoxの10.0.1、とChrome 17

jQueryのバージョン

コア1.7.1、UI v 1.8.17

何か間違っていますか？解決策はありますか？それはバグでしょうか？

Answer 1

あなたが追加することによって、.scroll要素のためのあなたのCSSをmodifiy場合：この問題を解決する必要があり

position:relative; 

。

Answer 2

heightのプロパティがなくてもソート可能なリストにoverflow-y:scrollを追加すると解決します。それは無効なスクロールバーしか表示しませんが、それは大丈夫です。

Answer 3

jQuery UI 1.9.2のように見えます。

ライブラリを変更できない場合は、簡単なスクロールバー操作を含む回避策があります。考え方は単純です：

• スクロールするたびに前のスクロール位置を保持します。
• 要素のドラッグを開始するときにスクロールを元の位置に戻すように設定します。

ここに移動します。

var lastScrollPosition = 0; //variables defined in upper scope 
var tempScrollPosition = 0; 

window.onscroll = function() { // Up to you requirement you may change it to another elemnet e.g $("#YourPanel").onscroll 
    clearTimeout($.data(this, 'scrollTimer')); 
    $.data(this, 'scrollTimer', setTimeout(function() { 
     tempScrollPosition = lastScrollPosition; // Scrolls don't change from position a to b. They cover some numbers between a and b during the change to create a smooth sliding visual. That's why we pick the previous scroll position with a timer of 250ms. 
    }, 250)); 

    lastScrollPosition = $(document).scrollTop(); // Up to you requirement you may change it to another elemnet e.g $("#YourPanel").onscroll 
}; 

$("#YourSortablePanel").sortable({ 
    start: function (event, ui) { 
     $(document).scrollTop(tempScrollPosition); 
    } 
}); 

Answer 4

（プレースホルダが作成される直前に）ソートするときは、容器交換の高さによって引き起こされる

問題を十分に記載し、このスタックオーバーフローに応答される：https://stackoverflow.com/a/32477389/2604980

Answer 5

아래로あなたが食べることができます。

var cY = -1; 
var base = 0; 
$("").sortable({ 
    sort: function(event, ui) { 
    var nextCY = event.pageY; 
    if(cY - nextCY < -10){ 
     if(event.clientY + ui.helper.outerHeight(true) - 20 > document.body.clientHeight) { 
     base = base === 0 ? event.clientY : base; 
     var move = event.clientY - base; 
     var curScrollY = $(document).scrollTop(); 
     $(document).scrollTop(curScrollY + move+3); 
     base = event.clientY; 
     } 
    } 
    }, 
    // ..... 
});