draggableでcontainmentを指定してないのに"parent"（親要素内）になってしまう問題

たとえば、hogeの中にdragがある。

<div id="hoge">
　<div id="drag">contents</div>
</div>

で、

$(".drag").draggable({
　/* 処理 */
});

だけ書いてあるのに、hogeから出れない問題があった。

真っ先に疑ったオプションがコレ系なんだけど、「できない」「no work」で調べると殆んどがこのオプションにたどりつく。しかし、どこにも記述していない。

$(".drag").draggable({
　containment: 'parent',
　/* 処理 */
});

今回の問題はCSSにあったoverflow

#hoge{overflow: hidden;}

CSSを修正すると何が起きるか検証するのが面倒だったので、こんな対策を施した。

$(".drag").draggable({
　start:function(e, ui){
　　$(this).parent().css("overflow", "visible");//親から脱出できない対策
　　},
　drag: function(e, ui){
　　/* 処理 */
　　},
　stop: function(e, ui){
　　$(this).parent().css("overflow", "hidden");
　　},
　revert: true
　}).hover(function (){
　　/* 処理 */
　}
});

脱出できない要素のoverflowを調べてみるべし。