追加可拖動元素相對於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中不起作用，但確實有效。