将元素移动到另一个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答案就是 __CODE__

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

这也可能有所帮助:https://api.jquery.com/detach/

Answer 2

我意识到这个线程非常旧，但是如果有人在这里并且想要在没有 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 3

使用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 4

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

然而？

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

为了更清楚地说明，我将使用 Chrome 开发者工具。（该代码的工作方式与 Firefox 中的 Firebug 相同）

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 个子节点之前

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

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

希望我能帮忙。再见。