将元素移动到另一个 div 而不会丢失事件、侦听器等（没有 jQuery）

Question

简单地说，我正在尝试将子菜单从一个位置移动到另一个位置。 （简单） 我需要在不丢失任何事件处理程序等的情况下执行此操作。（更难）

  <ul id="Menu A">
      <li id="submenu">My Submenu with Clicky Events</li>
  </ul>
  <ul id="Menu B">
      <!--This is where I want to move #submenu (with) all its' events intact -->
  </ul>

我尝试了以下方法但没有成功：

    var submenu = $('#submenu').clone(true,true);
    submenu.prependTo('.Menu B'); 

理想情况下，我可以在不使用 jQuery 的情况下找到解决方案，但如果你有一个可以使用它的解决方案，那就没问题了。

Answer 1

使用 jQuery，您可以使用 .appendTo()

$('#element_to_move').appendTo('#PARENT_at_destination');

jQuery 会将其从当前位置剪切并将其移动到新位置，而不会丢失绑定等。但是，样式可能会受到影响，因为 DOM 位置会发生变化。

这也有帮助：https://api.jquery.com/detach/

Answer 2

使用 JavaScript，您不必 clone() 要移动的节点，只需获取对它的引用，然后将其插入到您想要的任何位置，例如：

// simple function to demonstrate a click-handling:
function spanClick (){
    // message to demonstrate that the function still works
    // without having to worry about cloning:
    console.log("So, you've clicked the span.");
    // moving the element elsewhere:
    div.appendChild(this);
}

// references to the various elements:
var span = document.getElementById('demo'),
    div = document.getElementById('recipient');

// assigning the click event-handler:
span.addEventListener('click', spanClick);

function spanClick() {
  console.log("So, you've clicked the span.");
  div.appendChild(this);
}

var span = document.getElementById('demo'),
  div = document.getElementById('recipient');

span.addEventListener('click', spanClick);

span {
  color: #f90;
}
div {
  border: 1px solid #000;
  margin: 1em;
}
div span {
  color: #0f0;
}

<p>If you click the following <code>span</code> element, you'll log a message to the console (<kbd>F12</kbd>), and move it to inside the following <code>div</code> element. <em>It will still trigger the message</em>.</p>
<span id="demo">This is the <code>span</code></span>
<div id="recipient"></div>

cloneNode() 或 clone() 仅在您出于某种原因需要复制节点时才需要。

参考资料：

• EventTarget.addEventListener()。
• Node.appendChild()。

Answer 3

我意识到这个线程非常老了，但是如果有人在这里并且想要在没有 jQuery 的情况下移动一个元素，你可以简单地使用 insertBefore 这将移动该元素及其所有子元素并保留所有事件侦听器等。

例如：

let el = document.getElementById("thingBeingMoved");
let moveTo = document.getElementById("otherThing");
moveTo.parentNode.insertBefore(el, moveTo);

moveTo 是文档中将在被移动元素之后或旁边的元素。如果您想移动到最后，您可以获取父容器并使用appendChild。

我正在使用它来重新排序包含许多子元素的行，包括使用外部库创建的图表。即使在我进行移动时图表尚未完成加载/渲染，它也不会导致任何问题，因为容器及其所有正在移动的子项不会以任何方式被破坏或更改。事实上，当我使用一些非常基本的拖放事件处理程序移动它并像这样设置元素位置时，我仍然可以看到图表被加载到容器中：

element.style.position = "fixed";
element.style.left= pageX + "px";
element.style.top = pageY + "px";
element.style.zIndex = 99;

Answer 4

您是否尝试过：
- cloneNode(true|false) 和 removeChild() 或
- replaceChild()

还没有？

编辑： 这是您要求的示例：我将左侧的雅虎菜单栏移到中心。移动的菜单栏将具有以前的所有功能。 （我希望这是您所期望的示例）

为了更清楚，我将使用 Chrome 开发人员工具。 （代码的工作方式与 Firebug 和 Firefox 相同）

1. 使用浏览器 Google Chrome 并转到 https://de.yahoo.com/?p=us
2. [ctrl.]+[shift]+[j] 打开开发者工具。
3. [esc] 以便在开发工具中打开控制台。

在控制台中输入以下内容：

var myNode=document.querySelector("#nav-col-holder");// the element you want to move
var newNode=myNode.cloneNode(true);//it's complete clone with all the children node
var insertLocation=document.querySelector("#yui_3_8_1_1_1413153166615_364");//the location you want the clone to move to

分析您希望克隆删除到的确切位置。使用dir(insertLocation) 获取准确的目标位置。在这个前。我只是把它放在 insertLocation 的第 6 个 childNode 之前

insertLocation.insertBefore(newNode, insertLocation.childNodes[5]);//the clone node is at the target position
myNode.parentNode.removeChild(myNode);//remove the original node

现在，您应该看到我刚刚将左侧的菜单栏移到了页面的中心，而没有丢失此菜单栏的任何功能。

希望我能帮上忙。再见。

Answer 5

您使用 id 两次。试试这个：

  <ul id="menua">
      <li id="submenua">My Submenu with Clicky Events</li>
  </ul>
  <ul id="menub">
      <li id="submenub">My Submenu missing Clicky Events</li>
  </ul>

还有.js：

$( "#submenua" ).clone().prependTo( "#submenub" );
// If you want to move instead of clone, add this line:
$("#menua #submenua").remove();