jQuery Sortable List でアイテムが上に飛んでずれてしまう。

文章だと説明が難しいですが、ドラッグをしてsortable listのアイテムを掴むと、本来であればカーソルにくっついてくるはずのアイテムが、だいぶ上の方に飛んでいってしまいます。

長いリストの場合、ページ下の方のアイテムは、へたすると見えない位置に行ってしまいます。

これでは使いにくという事で、改修すべく調べました。

アイテムがずれると検索すると、親要素にposition: relative;とオプションappendToで解決できる記事がヒットしましたが、
それでは解決できなかったので、別の方法をメモしておきます。

一度その方法を試してみる事もおすすめします。

結論、CSSでoverflow:auto;を使う

親要素にoverflow: auto;を追加してあげます。

overflow: auto;追加するだけですoverflow: auto; 親（ul、#element、whatever_you_call_it）に渡すと、うまくいくはずです。 これにより、ドキュメントの高さがわずかに変わっても、サイズ変更時にオーバーフローオートが要素の高さを保持することが保証されます。

https://code.i-harness.com/ja-jp/q/1a7acc

今回はリストが長かったため（スクロールが必要な長さ）、高さがうまく取得できていないような振る舞いでした。

ですので、引用元にあるように親要素にoverflow: auto;を追加して上げたところ….、きれいに改修できました。

<ul id="sortable" style="overflow: auto;">
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ul>

ついでに、ドラッグできる方法を制限してあげると自然でした。

 $('#sortable').sortable({
    axis:"y"
 });