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

Question

如果我有以下html:

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

如何保存.draggable当前的DOM位置(通常)？

我计划.draggable通过将其附加到document.body并制作position: absolute;而拖动它,但是如果用户没有对它做任何事情我将需要恢复它.

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

思考？

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