jQuery UI：如何让父级在拖动时跟随子元素？

Question

我正在创建一个<div>元素，它有一些子元素和文本节点。我将可拖动函数绑定到<div>元素的子元素之一。我想过使用可拖动的drag事件，我可以实现我想要的但是它变得很奇怪。

Fiddle Link

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;
}

但这是一种奇怪的方式。我知道逻辑不好但仍然认为它会起作用。