添加可拖放元素后，使其相对于可拖放元素的坐标

我正在尝试为一个使用可拖放元素的网站制作一个工具，从jQueryUI.

我有一个包含元素(可拖拽)的div和一个元素将被移动到(可拖拽)的div。它们是完全独立的div，一旦一个元素被放入可掉落的div中，它就需要被移动到那里。

我有代码可以移动它，让可拖放的接受正确的东西，甚至代码来保持可拖放的元素只在可拖放的div中可拖放。当您最初将可拖拽元素拖拽到可拖拽的div时，问题就出现了。

它保留了包含可拖动元素的原始div的坐标。所以，当我把它附加到新元素上时它看起来偏移了很多。我可以将它移动到可掉落的div之后，它就像预期的那样工作，但如果它不能从一开始就存在，那就没有多大帮助了。

有没有办法只是让它转换坐标，以匹配可降的div，所以它出现在页面上的同一位置，但在DOM上的可降的div内?

的例子:HTML

<div id="MoveZone" class="Container">
    <div id="MoveMe"></div>
</div>
<div style="height: 10px;"></div>
<div id="DropZone" class="Container"></div>

CSS

.Container {
    outline-style: solid;
    outline-color: black;
    outline-width: 3px;
    height: 100px;
    width: 100px;
}
#MoveMe {
    outline-style: solid;
    outline-color: blue;
    outline-width: 2px;
    height: 20px;
    width: 20px;
    background-color: ghostwhite;
}

JavaScript

$(document).ready(function () {
    $('#MoveMe').draggable({
        revert: 'invalid'
    });
    $('#DropZone').droppable({
        accept: '#MoveZone div, #DropZone div',
        drop: function (event, ui) {
            ui.draggable.detach().appendTo($(this));
            ui.draggable.draggable('option', 'containment', 'parent');
        }
    });
});

小提琴在某种程度上，我确实找到了一种方法。但它需要硬编码在可掉落的div的id…我不是特别喜欢。此外，当它被放下时，它会略微偏移到左上角，所以即使这样它也不是完美的，因为如果它被放在左上角，它会有一部分在框外。

其他小提琴

编辑:
我能想到的唯一一种方法是如何计算盒子之间的偏移量并在drop方法中调整位置。但我不确定我该怎么做，特别是因为在我的网站上，可降落点的位置不会是静态的。(它位于页面中央，因此可以稍微移动。)

$(document).ready(function () {
    $('#MoveMe').draggable({
        revert: 'invalid',
        cursor: 'move'
    });
    $('#DropZone').droppable({
        accept: '#MoveZone div, #DropZone div',
        drop: function (event, ui) {
            var parent = ui.draggable.parent();
            var draggedElement = $(ui.draggable);
            var dropZone = $(this);
            var leftOffset = Math.abs(parent.offset().left - dropZone.offset().left);
            var topOffset = dropZone.offset().top - parent.offset().top;
            draggedElement.detach().appendTo(dropZone);
            draggedElement.css('left', draggedElement.position().left - leftOffset);
            draggedElement.css('top', draggedElement.position().top - topOffset);
            draggedElement.draggable('option', 'containment', 'parent');
        }
    });
});