jQueryUIのresizableでcontainmentが効かない場合

TABLEで結合したセル内の要素にjQueryUIのrisizableを設定した際、containmentプロパティが正しく動かず苦労した。

resizableのcontainmentに指定する要素はrelativeやabsoluteを指定する必要がある。

しかしtdにはrelativeを指定することができないため、td内にrelativeを指定したdiv#containment-divを挟んで、

そのdiv#containment-divをcontainmentに指定していた。

しかし正しくdiv#containment-divのエリアを認識せず、自由にリサイズできなかった。

<!-- HTML -->
<table>
    <tr>
        <th>boxをリサイズ</th>
        <td colspan="10">
            <div id="containment-div">
                <div class="box"></div>
            </div>
        </td>
    </tr>
</table>

// JS
$( ".box" ).resizable({
    containment: ".containment-div"
})

これを以下とすることで解決した。

// JS
$( ".box" ).resizable({
    containment: "parent"
})

セル内だとセレクタがうまく動かないらしい。