jquery - jQuery UI:ドラッグ時に子要素を親に追従させる方法は?

Question

私は<div>要素を作成していますが、いくつかの子要素とテキストノードがあります。element の子要素の 1 つにドラッグ可能な関数をバインドしました<div>。ドラッグ可能なdragイベントを使用して、私が望むものを達成できると考えましたが、それは奇妙になります。

フィドルリンク

HTML:

<div class="parent" style="margin:50px; width:200px;height:200px;border:1px solid #000;position:relative;">
    <div class="child" style="border-radius:4px 4px 4px; background:#000;position:absolute;top:-5px;left:-5px;width:10px;height:10px;">
    </div>
</div>

JS:

$(".child").draggable({
  drag:function() {
    $(this).parent().css({ "top":$(this).offset().top+"px", "left": $(this).offset().left+"px" });
  }
});

CSS:

.child:hover {
  cursor:crosshair;
}

しかし、それは奇妙な方法です。ロジックが良くないことはわかっていますが、それでもうまくいくと思いました。