如何在 DOM 树中保存/恢复对象的位置？

【问题标题】：How do I save/restore an object's location in the DOM tree?如何在 DOM 树中保存/恢复对象的位置？
【发布时间】：2012-02-29 01:13:45
【问题描述】：

如果我有以下 html：

<ul>
  <li>test</li>
  <li class='draggable'>special</li>
  <li>test</li>
</ul>

如何保存.draggable 的当前 DOM 位置（一般）？

我计划通过将其附加到 document.body 并制作 position: absolute; 来拖动此 .draggable，但如果用户无法对其执行任何操作，我将需要恢复它。

我可以通过克隆、隐藏原件和使用代理进行拖动来做到这一点，但我觉得这个问题可能已经更直接地解决了。

想法？

【问题讨论】：

看看 jQueryUI 可拖动，内置“revert”选项

标签： jquery dom

【解决方案1】：

要保存对象的位置，您只需将 DOM 引用保存到它之前的同级即可。如果之前没有兄弟，则保存父级。

function saveLocation(element) {
    var loc = {};

    var item = $(element).prev();
    loc.element = element;
    if (item.length) {
        loc.prev = item[0];
    } else {
        loc.parent = $(element).parent()[0];
    }
    return(loc);
}

然后，恢复：

function restoreLocation(loc) {
    if (loc.parent) {
        $(loc.parent).prepend(loc.element);
    } else {
        $(loc.prev).after(loc.element);
    }
}

【讨论】：

您好 jfriend00，我在 Google 搜索中遇到了这个答案，并正在尝试为我正在开发的网站实施它，但遇到了一些 null / undefined variable 错误。你介意看看这个 jsFiddle 看看我在实现中可能会出错吗？ jsfiddle.net/LH9Xu/1
@R.J. - 请参阅此 jsFiddle 中的更正：jsfiddle.net/jfriend00/R43d6。您必须保存保存的位置，并且必须传递一个元素，而不是选择器。