Whenever I am on a mobile device, I move Vue components higher up in the dom so that I can use absolute positioning without being contained within a relative container.
if (this.mobile) {
this.$el.parentNode.removeChild(this.$el);
document.getElementById('vue').appendChild(this.$el);
} else {
// Return the element to its original position.
}
This code is embedded within a debounced resize method to ensure it functions properly during window resizing.
Everything works as expected, but when switching from mobile to desktop size, I struggle to retrieve the initial dom location where the component was first loaded.
While this may be more of a JavaScript-related issue, I am seeking guidance on how to accurately determine and restore the original position of the component within the dom structure.
Edit
To capture the initial parent element, I have utilized the following code:
this.parent = this.$el.parentElement;
However, this approach does not always preserve the correct order within the parent element when reappending the element back to its parent.