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

Question

如果我有以下html：

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

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

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

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

思想？

Answer 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);
    }
}