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

Question

如果我有以下的html：

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

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

我计划通过追加到document.body通过拖拽此.draggable并使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); 
    } 
}