我想交换两个子 div 的位置答案

【问题标题】：I want to swap the positions of two children divs我想交换两个子 div 的位置
【发布时间】：2021-07-28 06:08:50
【问题描述】：

我有一个 div，其中包含代表列表成员的子 div 列表。我正在尝试创建一组按钮来在列表中向上或向下移动列表项。我可以检索列表的索引，但我不知道如何更改当前元素的位置

        function moveUp(){
            let list = document.getElementById("answer").children;
            let targeted = document.getElementById("answer").getElementsByClassName("active")
            var temp = Array.prototype.indexOf.call(list,targeted[0])
            console.log(temp)
            if(temp > 0){
                list[temp] = list[temp-1];
                list[temp-1] = targeted[0]
            }
        }
        function moveDown(){
            let list = document.getElementById("answer").children;
            var temp = Array.prototype.indexOf.call(list,document.getElementById("answer").getElementsByClassName("active"))
            if(temp < list.length-1){
                list.swap(temp, temp+1);
            }
        }

<div class="white" id="answer" name="answer" style="height:21.125vh; width:35vw; box-sizing: border-box; overflow: auto;">
<div id="1" class="" style="height: 5vh; font-size: 2vw; color: black; text-align: center; justify-content: center; overflow: auto;">test</div>
<div id="2" class="active" style="height: 5vh; font-size: 2vw; color: black; text-align: center; justify-content: center; overflow: auto;">commands</div>
<div id="21" class="" style="height: 5vh; font-size: 2vw; color: black; text-align: center; justify-content: center; overflow: auto;">Final</div>
</div>

这是我要移动的 div 的测试列表。我尝试的测试是选择带有 innerhtml“命令”的 div 并将其向上移动，但没有任何反应。按向下按钮会出错

Uncaught TypeError: list.swap is not a function

如果我能在这方面得到一些帮助，那就太好了。

【问题讨论】：

你用什么浏览器？

标签： javascript html css arrays

【解决方案1】：

我已经为你实现了moveDown。您可以使用它在向上箭头上实现 moveUp（将 + 2 更改为 - 2）。解决方法是获取元素的索引，获取父元素，利用insertBefore函数。

function moveDown(elem) {
  var parentElem = elem.parentElement;
  var elemIndex = Array.prototype.indexOf.call(parentElem.children, elem);
  parentElem.insertBefore(elem, parentElem.children[elemIndex + 2]);
}

<div class="white" id="answer" name="answer" style="height:100%; width:50%; box-sizing: border-box; overflow: auto; padding: 20px; border: 1px solid black;">
  <div id="1" class="" style="height: 30px; font-size: 2vw; color: black; text-align: center; justify-content: center; overflow: auto; border: 1px solid black;" onclick="moveDown(this)">test</div>
  <div id="2" class="active" style="height: 30px; font-size: 2vw; color: black; text-align: center; justify-content: center; overflow: auto; border: 1px solid black;" onclick="moveDown(this)">commands</div>
  <div id="21" class="" style="height: 30px; font-size: 2vw; color: black; text-align: center; justify-content: center; overflow: auto; border: 1px solid black;" onclick="moveDown(this)">Final</div>
</div>

【讨论】：

当我实现这个时，我发现向上按钮应该是-1，向下按钮应该是+2。可能是我的特定项目或其他东西。只是想我会让人们知道，以防他们遇到像我一样的问题，清单上的项目很远。

【解决方案2】：

首先，您必须从列表中删除要移动的元素。您可以使用 Javascript 删除功能来执行此操作。例如：https://developer.mozilla.org/en-US/docs/Web/API/Element/remove

然后你想把它插入到列表中的正确位置。为了将元素向上移动，正确的位置将在某个元素之前（因此在极端情况下它可以高于列表中的当前第一个元素）。为了将元素向下移动，正确的位置将在某个元素之后（因此在极端情况下，它可以向下移动到列表中当前最后一个元素的下方）。

请参阅How to insert an element after another element in JavaScript without using a library? 了解添加元素的方法。

您已经找到了相关的元素，所以您只需在测试 temp 时添加删除和插入代码。

如果您需要进一步说明，请告诉我。

【讨论】：