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答案就是：

$('#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()。

参考文献：

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开发者工具。（代码的工作方式与使用Firefox的Firebug相同）

使用浏览器Google Chrome并转到https://de.yahoo.com/?p=us
[ctrl。] + [shift] + [j]以打开开发人员工具。
[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();

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

5 个答案: