div를 jQuery와 함께 비파괴 방식으로 이동 하시겠습니까?

Question

좋아, 내가 버튼을 눌러에 주위 된 div를 이동 jQuery를 사용하고

<div id="video"></div> 
<div id="info"></div> 
<div id="chat"></div> 

세 된 div ... 있습니다.

$('#chat').insertBefore('#video'); 

여기에 문제가 있습니다. 이 함수가 수행하는 작업은 chat div를 복제/복제하는 것으로 간주하고 video div 앞에 삽입 한 다음 원래 chat div를 삭제합니다. 그러나 명확한 의미에서 chat div에 chatroom이 포함되어 있기 때문에이 방법은 잘 작동하지 않습니다.

따라서 복제 및 파괴 방법으로 새로운 채팅 요소가로드됩니다.이 요소는 많은 리소스를 차지할뿐만 아니라 사용자가 다른 인스턴스 이후로 채팅룸에 다시 로그인하도록합니다.

div를 비파괴 방식으로 이동하는 방법이 있습니까? 복제하고 파괴하지 않고? 육체적으로 div를 움직이는 어떤 종류의 방법?

Answer 1

IFRAME을에서 이동할 수 없습니다. DOM을 한 장소에서 내용을 다시로드하지 않고 다른 장소로 가져옵니다.

insertBefore은 당신이 iframe 요소
을 insertBefore() 것 SWAP을 클릭하면
IFRAMES

LIVE DEMO with chat

을 처리하려합니다 특별히 경우, 동적 콘텐츠에 문제를 가지고 당신 iframe 콘텐츠가 으로 새로 고침됨을 알 수 있습니다.
채팅 앱 (모듈)에서도 마찬가지입니다.

Answer 2

Document jQuery 사이트의 insertBefore에는 다음과 같은 내용이 나와 있습니다.

이러한 방식으로 선택된 원소가 다른 장소 DOM 내의 한 위치에 삽입 인 경우

은 그것은 (안 복제) 타겟 되고, 삽입 요소로 이루어진 새로운 전에 이동 될 반환되었습니다.

위의 진술은 귀하의 상황에 적용됩니다. 귀하의 div은 파괴되거나 복제되지 않습니다.

그러나 복제 된 사본 삽입 요소 가 제, 그 새로운 세트 (일본어 소자 플러스 클론) 후에 각각의 대상에 대해 생성 될 하나 개 이상의 타겟 요소가 하면 은입니다.

요소가 많은 대상 앞에 삽입되면 복제됩니다.

Answer 3

당신은 기본 insertBefore 시도 할 수 있습니다 :

var video = document.getElementById('video'), 
    chat = document.getElementById('chat'); 

video.parentNode.insertBefore(chat, video); 

을 완벽한 세계에서의 jQuery 방법은이 방법을 작동합니다. 하지만 f.ex에 여러 개의 타겟이 있고 jQuery가 "훌륭하다"면 아마이 방법으로 상황을 파악할 수 있습니다.

Answer 4

다른 방법으로이 문제를 해결했습니다. 사람들은 내용을 다시로드하지 않고 DOM의 한 위치에서 다른 위치로 iFRAME을 이동할 수 없다는 것을 확인했기 때문에 ...

DOM에서 div를 이동하는 대신 단순히 위치를 그대로두고 "position : 절대적인 "div에 내가 정상에 그것을 원했고, 꼭대기에 그것을 강요했다.