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>

备注

您必须在HTML之后放置JavaScript，否则JavaScript将无法找到要交换内容的元素。

“onclick”函数参数中的引号属于这种类型，因为所有代码都是为PHP + Html打印宽度“。

Answer 2

我不确定你的方法是否实用，但这是一个JavaScript解决方案，它将从DOM中删除一个元素并将其附加到另一个元素中。

如果父元素没有id属性，则使用计数器创建一个。

恢复元素只是使用id属性跟踪父元素的data-parent。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何从一次又一次地移动HTML元素的内容？

2 个答案: