돔 내에서 Vue 구성 요소를 이동하시겠습니까?

돔 내에서 Vue 구성 요소를 이동하시겠습니까?

절대 포지셔닝을 사용하고 싶으며, 위치 고정 기능을 사용하지 않도록 하기 위해 모바일을 사용하는 경우 돔에서 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창 크기 조정에도 효과가 있다.

작동은 괜찮지만 모바일을 시작하고 데스크톱으로 다시 크기를 조정하면 구성 요소가 처음 초기화된 원래 돔 위치를 가져와야 한다.

Javascript 전용 질문일 수 있지만, 이 구성 요소의 정확한 돔 위치의 원래 위치를 어떻게 얻어서 다시 넣을 수 있는가?

편집

초기 상위 요소를 저장하는 방법:

this.parent = this.$el.parentElement;

요소를 다시 parentElement에 추가해도 상위 요소의 올바른 순서를 보장하지는 않는다.

원본을 저장하려는 경우parentNode한 번 쓰고 필요할 때 쓰세요.이런 일은 잘 될 거야.설정에 따라 대니얼 벡의 숨겨진 마커 아이디어와 함께 사용해야 할 수도 있다.

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

참조URL: https://stackoverflow.com/questions/45166973/moving-vue-components-around-inside-the-dom