Moving Vue components around inside the dom?

Viewed 13367

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.

1 Answers
Related