しぃぶろぐ。

仕事とか技術関係のこと。他色々

jQueryUIのdraggableなdivがoverflowを乗り越えられなかったの。

いきなり何のことやらと思われます。

が、今日はこのままぶっちぎりなのでご注意ください。

 

現象

jQueryUIのdraggableなdiv*1が、

親divから出ると消えてしまう(消えるというよりも、どうも裏側に回っている:z-indexがマイナスな感じ)。

 

ちょっと愚痴を含めた詳細な経緯

jQueryUIのdraggableなdivが、枠div(仮に枠A)と枠div(仮に枠B)の間を行き来します。

今までは枠Aと枠Bにはoverflowが無かったのですが、今回の修正で追加しました。

(余談:今まで固定幅だったものを可変にし、overflowつけてはみ出したらスクロールで枠Aと枠Bで連動させてます。
これも苦労しましたが、こっちは日本語情報が一応あったので今度時間があった時にします)

今までは枠間を行き来してもドラッグ中のdivが消えることは無かったのですが、

overflowをつけた途端に、もともとあったところから少しでもはみ出すと消えてしまうようになってしまいました。

 

で。Google先生にききまくり。

でも、「draggable 消える」みたいな検索語だと、使い方みたいなページしか教えてくれない。

jQueryUIのAPIも見て(基本だよね!)zindexの設定とか、!importantつけてみたりとか、containmentとかいろいろ設定しましたが全部ダメ。

初心に帰ろうとおもって「draggable overflow hidden」で検索したら、

stackoverflowがでて一発でした…なんてこったい。

 

http://stackoverflow.com/questions/811037/jquery-draggable-and-overflow-issue

 

日本語以外言語と認めない方、もしくは解決策だけ知りたい方向けに、

今回の件は以下で解決します。

クローンだして親を消しとくとか、そんな発想なかったです。

そもそも親が下に入り込むとかやめていただきたい。

クローンなら最前面になるとかも意味がわからない…。くそう。私の5時間を返せ。

*1:ドラッグアンドドロップできるdiv要素のこと