HTML要素のコンテンツを何度も何度も何度も移動させるには？

Question

ある要素から別の要素に特定のコンテンツをドラッグして、元のJavascriptに戻すにはどうすればよいですか？

デスクトップとモバイルのサイズに基づいてコンテンツの位置を変更するには、この機能が必要です。

私は自分の機能を作っていますが、問題は最後のアクションを実行してコンテンツを元の位置に再び移動することができないことです。それは私が考えるいくつかのバインド機能が必要ですか？

function moveContent(fromid, toid) 
{ 
    // Insert After This 
    var ref_el = document.getElementById(toid); 
    var parent = ref_el.parentNode; 

    // From Element 
    var from_el = document.getElementById(fromid); 
    if (from_el != null) 
    { 
     var from_el_parent = from_el.parentNode; 
     tparent = from_el.parentNode; 
     if (tparent === null || tparent.id !== toid) 
     { 
      var holder = from_el.outerHTML; 
      from_el.innerHTML = ''; 

      // Insert inside 
      ref_el.innerHTML = holder; 
     } 
    } 
} 

Answer 1

機能例

function ChangeContent(aid,bid) 
     { 
     if((document.getElementById(aid)!=null)&&(document.getElementById(bid)!=null)) 
      { 
       var atemp=document.getElementById(aid).innerHTML; 
       var btemp=document.getElementById(bid).innerHTML; 
       document.getElementById(aid).innerHTML=btemp; 
       document.getElementById(bid).innerHTML=atemp; 
      } 
     } 

HTML例

<div id='A'><hr> 
     First div content<hr> 
    </div> 
    <div id='B'> 
     <strong>List</strong><br> 
     <ul> 
      <li>1</li> 
      <li>2</li> 
      <ul> 
      <li>3.1</li> 
      <li>3.2</li> 
      </ul> 
     </ul> 
    </div> 
    <input type='button' onclick='SwapContent(\"A\",\"B\");' value='Swap'></button> 

ノート

あなたはJavaScriptを配置する必要がありますHTMLの後になければ、JavaScriptはコンテンツをスワップするための要素を見つけることができないからです。すべてのコードはPHP + HTML形式の印刷幅」のために書かれたので、「onclickの」関数のパラメータで

引用符はこのタイプである。

Answer 2

私はあなたのアプローチはどのように実用的なのですが、ここではその意志JavaScriptのソリューションであるかどうかわからないんだけどDOMから要素を削除し、別の要素内に追加します。

親要素がid atribute、1がカウンターを使用して作成されていない場合。

要素を復元すると、簡単に追跡する場合であります親要素のidの012を使用して属性。

(function() { 
 

 
    var Counter = function() { 
 

 
    if (Counter.prototype._singletonInstance) { 
 
     return Counter.prototype._singletonInstance; 
 
    } 
 

 
    Counter.prototype._singletonInstance = this; 
 

 
    this.getValue = function() { 
 
     if (this.value) { 
 
     this.value++; 
 
     } else { 
 
     this.value = 1; 
 
     } 
 
     return this.value; 
 
    }; 
 

 
    }; 
 

 
    function moveContent(fromId, toId) { 
 
    var from_el = document.getElementById(fromId); 
 
    var target_el = document.getElementById(toId); 
 
    
 
    if (from_el != null && from_el != target_el) { 
 
     var from_el_parent = from_el.parentNode; 
 
     var parent_id = from_el_parent.getAttribute("id"); 
 

 
     if (!parent_id) { 
 
     // parent element doesn't have an id 
 
     // so generate a new parent id 
 
     var counter = new Counter(); 
 
     parent_id = "gen_" + counter.getValue(); 
 
     from_el_parent.setAttribute("id", parent_id); 
 
     } 
 

 
     if (!from_el.getAttribute("data-parent")) { 
 
     // the data-parent attribute is our route home 
 
     from_el.setAttribute("data-parent", parent_id); 
 
     } 
 
     
 
     // Insert After This 
 
     target_el.appendChild(from_el); 
 
    } 
 
    } 
 
    
 
    function restoreContent(id) { 
 
    var el = document.getElementById(id); 
 
    var parent = el.getAttribute("data-parent"); 
 
    if (parent) { 
 
     // data-parent attribute exists 
 
     var target = document.getElementById(parent); 
 
     if (target) { 
 
     // target is valid 
 
     target.appendChild(el) 
 
     } 
 
    } 
 
    } 
 
    
 
    document.getElementById("switchAtoB").onclick = function switchAtoB() { 
 
    moveContent("contentA", "parentB"); 
 
    } 
 

 
    document.getElementById("restore").onclick = function restoreA() { 
 
    restoreContent("contentA"); 
 
    } 
 

 
})();

#parentA { 
 
    background-color: #0aa; 
 
    min-height: 100px; 
 
} 
 
#parentB { 
 
    background-color: #aa0; 
 
    min-height: 100px; 
 
}

<div> 
 
<div id="parentA"> 
 
    <div id="contentA"> 
 
    <h1>Simple Title</h1> 
 
    <p>Lorem ipsum...</p> 
 
    </div> 
 
</div> 
 
<div id="parentB"> 
 
    <div id="intro"> 
 
    <p>Blah blah blah ...</p> 
 
    </div> 
 
</div> 
 
<div> 
 
    <button id="switchAtoB">A -> B</button> 
 
    <button id="restore">Switch Back</button> 
 
</div> 
 
</div>