Moving Vue components around inside the dom?

Question

I am moving Vue components up in the dom if I am on mobile since I want to use positioning absolute and want to make sure I am not within a relative container.

if (this.mobile) {
    this.$el.parentNode.removeChild(this.$el);
    document.getElementById('vue').appendChild(this.$el);
} else {
    // Place the element back at it's original location.
}

This code is placed with a debounced resize method so it also works on resizing of the window.

It works fine but when I start out on mobile and resize back to desktop I need to get the original dom location of where the component was first initialized.

This might be a Javascript only question but how can I get the original location of the exact dom position of this component so I can place it back again?

Edit

I am saving the initial parent element with:

this.parent = this.$el.parentElement;

This does not guarantee the right order in the parent element though when I append the element back to the parentElement again.

Answer 1

You just want to save the original parentNode once and use it when you need it. Something like this ought to work. Depending on your setup, you might need to use insertBefore with Daniel Beck's hidden marker idea.

if (!this.originalParentNode) {
    this.originalParentNode = this.$el.parentNode;
}
if (this.mobile) {
    this.$el.parentNode.removeChild(this.$el);
    document.getElementById('vue').appendChild(this.$el);
} else {
    // Place the element back at its original location.
    this.originalParentNode.appendChild(this.$el);
}