附加到可拖动元素后，相对于可拖放元素制作可拖动元素的坐标答案

【问题标题】：Make coordinates of draggable element relative to droppable element after appending to it附加到可拖动元素后，相对于可拖放元素制作可拖动元素的坐标
【发布时间】：2014-08-06 23:10:08
【问题描述】：

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

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

我有代码可以用来移动它，让 droppable 接受正确的东西，甚至还有代码来保持可拖动元素只能在 droppable 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');
        }
    });
});

Fiddle

我确实找到了一种方法来做到这一点。但它需要在可删除的div 的 id 中进行硬编码……我不是特别喜欢。此外，当它被放下时，它会稍微偏移到左上角，所以即使这样它也不是完美的，因为如果它被放在左上角，它会部分开箱即用。

Other Fiddle

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

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

【解决方案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 元素之间的偏移量，当它被附加到可放置的div 时，您将顶部和左侧CSS 调整为新的。

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

【讨论】：