将可拖动项目设置为可放置容器的左侧，而不重叠项目

Question

我正在制作一个使用jQuery UI可拖动/可放置功能的URL构建器小部件。我无法弄清楚如何将draggables（在它们被丢弃之后）重新定位到droppable的左侧。此外，我需要使拖动不重叠。

查看我的jsfiddle，了解我到目前为止的情况。可拖动的按钮会滑动到灰色区域，否则会恢复到原来的位置。

我以为我可以逃脱这样的事情：

$("#droppable").droppable({
    drop: function (event, ui) {
        $(ui.draggable).data('hasBeenDropped', true);
        $(ui.draggable).animate({
            left: $(this).position().left
        })
     }
});

但是，这只是将容器的左侧位置添加到left:0可拖动位置。关于绝对位置的事情？