I want to swap the positions of two children divs

Question

I have a div that then contains a list of child divs that represent a list member. I am trying to create a set of buttons to move an list item up or down in the list. I can retrieve the index of the list, but I don't know how to change the positions of the current elements

        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>

That is the test list of divs I am trying to move. The test I attempt is selecting the div with the innerhtml "commands" and moving it up and nothing happens. Pressing the down button get the error

Uncaught TypeError: list.swap is not a function

If I could get some help with this, that would be great.

what browser do u use? – לבני מלכה Jul 28 '21 at 06:18 — לבני מלכה, Jul 28 '21 at 06:18

score 2 · Accepted Answer · answered Jul 28 '21 at 09:26

I've implemented for you moveDown. You can use this to implement moveUp (change + 2 to - 2) on an up-arrow. The solution is to get the element's index, get the parent element, and utilize insertBefore function.

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>

When I implemented this, I found that it should be -1 for the up button and +2 for the down button. Might be my specific project or something. Just figured I would let people know in case they are having issues like I was with the items going to far on the list. — Josh Solders, Jul 28 '21 at 16:01

score 0 · Answer 2 · answered Jul 28 '21 at 06:28

First you have to remove the element you want to move from the list. You can do this using the Javascript remove function. See for example: https://developer.mozilla.org/en-US/docs/Web/API/Element/remove

Then you want to insert it into the list at the right place. For moving an element up the right place will be before some element (so it can in the extreme case go up above the current first element in the list). For moving the element down the right place will be after some element (so it can in the extreme case go down below the current last element in the list).

See for example How to insert an element after another element in JavaScript without using a library? for ways of adding an element.

You already have found the relevant elements so you just need to add the remove and insert code when you have tested temp.

Let me know if you need further clarification.

I want to swap the positions of two children divs

2 Answers2