追加可拖动元素相对于droppable元素的坐标

Question

我正在尝试为jQueryUI中使用draggable和droppable元素的网站制作工具。

我有一个div包含元素（draggables）和一个div元素将被移动到（droppable）。 它们是完全独立的div ，一旦元素被放入droppable div它就需要移动到那里。

我有代码可以移动它，让droppable接受正确的东西，甚至代码保持可拖动元素只在droppable div可拖动。 最初将可拖动元素拖到droppable div时会出现问题。

它保留了包含可拖动元素的原始div的坐标。 因此，当我将它附加到新元素时，它会出现偏移。 我可以将它移动到droppable div之后就好了，它按预期工作，但如果从一开始它不能存在就没有多大帮助。

有没有办法让它转换坐标以匹配droppable div的坐标，所以它出现在页面上的相同位置但是在DOM上的droppable 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');
        }
    });
});

小提琴

我确实找到了一种方法来做到这一点。 但它需要在droppable div的id中进行硬编码......我并不特别喜欢。 此外，当它掉落时，它略微偏向左上角，所以即使这样也不完美，因为如果它被放在左上角，它将部分开箱即用。

其他小提琴

编辑：
我能想到的另一种方法是如何计算方框之间的偏移量以及调整drop方法中的位置。 但我不确定我会怎么做，特别是因为在我的网站上，可放置点的位置不会是静态的。 （它以页面为中心，因此可能略有移动。）

Answer 1

我找到了解决问题的解决方案。 以下JavaScript就是它的作用。

$(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');
        }

    });
});

基本上，你只是计算两个div元素之间的偏移量，当它被附加到droppable div你将顶部和左侧CSS调整为新的那个。

出于某种原因，它在JSFiddle中不起作用，但确实有效。