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

如果我有以下 html：

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

我该如何保存.draggable当前 DOM 位置（一般而言）？

我打算拖这个.draggable通过将其附加到周围document.body并制作position: absolute;但如果用户未能对其执行任何操作，我将需要恢复它。

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

想法？

要保存对象的位置，只需保存对其之前同级对象的 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);
    }
}