在Vom内部移动Vue组件?

Ste*_*n-v 6 javascript vue.js vue-component vuejs2

如果我在移动设备上,我正在移动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.
}
Run Code Online (Sandbox Code Playgroud)

此代码使用去抖动resize方法放置,因此它也适用于调整窗口大小.

它运行正常,但是当我开始使用移动设备并重新调整到桌面时,我需要获得组件首次初始化的原始dom位置.

这可能只是一个Javascript问题,但我如何获得该组件的确切dom位置的原始位置,以便我可以将其重新放回去?

编辑

我正在保存初始父元素:

this.parent = this.$el.parentElement;
Run Code Online (Sandbox Code Playgroud)

虽然当我再次将元素追加回parentElement时,这并不能保证父元素中的正确顺序.

Roy*_*y J 6

您只想保存原件parentNode一次,并在需要时使用它.这样的事情应该有效.根据您的设置,您可能需要使用insertBeforeDaniel 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);
}
Run Code Online (Sandbox Code Playgroud)