Как сохранить / восстановить местоположение объекта в дереве DOM?

Question

Если у меня есть следующий html:

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

Как мне сохранить текущее местоположение DOM .draggable (обычно)?

Я планирую перетащить это .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);
    }
}