javascript - 在 dom 中移动 Vue 组件？

Question

如果我在移动设备上，我会在 dom 中向上移动 Vue 组件，因为我想使用绝对定位并想确保我不在 relative 容器中。

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.
}

此代码与去抖动的 resize 方法一起放置，因此它也适用于调整窗口大小。

它工作正常，但是当我开始使用移动设备并调整回桌面时，我需要获取组件首次初始化的原始 dom 位置。

这可能只是一个 Javascript 问题，但我如何才能获得此组件的确切 dom 位置的原始位置，以便我可以将其重新放回原处？

编辑

我正在保存初始父元素:

this.parent = this.$el.parentElement;

虽然当我再次将元素附加回父元素时，这并不能保证父元素中的正确顺序。

Answer 1

你只想把原来的parentNode保存一次，需要的时候再用。这样的事情应该有效。根据您的设置，您可能需要使用 insertBefore与 Daniel Beck 的隐藏标记想法。

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);
}