概要
覚書です。
jQueryUIのsortableはこれまでも使ったことがあるのですが、
sortで掴んだ要素がスクロールした高さ分上方向にずれるということが初めて発生し、
どうやって解決したかをメモします。
「jQueryUI sortable ずれる」でググると、タイトルの通りの事象を報告されている方が多くいますが、私なりに考えたところ、原因は親Elementの 「position:relative」 ではないかと思っています。
以下、原因を突き詰めていった流れです。
原因予測
sortしたい要素のdrag中にずれる。
drag中の要素は、position:absoluteになり、topやleftで位置指定されている。
そのtopがscrollした分だけずれるということは、
position:absoluteの上にposition:relativeがついて相対位置指定が変になっているのではないか？
実験: position:relativeを一つずつ外す
ずれが発生したHTMLとCSSを簡略化するとこんな感じです。
...
<style>
#container {
position: relative;
}
#container> div {
position:relative;
}
</style>
<script>
$("ul").sortable();
</script>
</head>
<body>
<div id="container">
<div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
</body>
</html>
position: relativeが怪しいということで、一つずつ外して確認してみる。
(実際の作業時は、まだposition:relativeが原因ではないか？と予測が立つ前はすべてタグやCSSを1つずつ切って確かめるという泥臭いことをしていました・・)
結果: position:relativeが全て無くなったらずれが解消された
sort中の要素は絶対位置指定となっている中で、
相対位置が決まってしまっているとスクロール分を反映できないということなんだな？
と理解。
ちなみに、
このずれる事象は、Chrome,Firefoxでは起きましたがEdgeでは起きなかった。
思うこと
結果としては親position:relativeを撲滅することで解消されましたが、
どうしても親にはposition:relativeは必要だ！ということもある時はどうしようか悩むところです。
今回 body > div#container にも付いていたわけですが、body直下のdivは共通のレイアウトに関わるので場合によっては修正は難しいことがありそう・・？
本当に必要なのかposition:relativeなのか精査するのもいいですね。大変ですけど。
あとはsortableしたいリストを、画面の上になるべく設置して、スクロールが影響しないようにする、という対処療法もありますかね・・・。