'Swap 3 divs and make the selection div go to the center

I have three divs and I want that every single time I click on any div, it will be swapped with a second div which is meant to be at the center.

I have tried like this and it doesn't work:

function swapDiv(event, elem) {
  elem.parentNode.insertBefore(elem, elem.parentNode.secondChild);
}
<div class="all-div-container">
  <div class="div1" onclick="swapDiv(event,this);">
    1
  </div>
  <div class="div2" onclick="swapDiv(event,this);">
    2
  </div>
  <div class="div3" onclick="swapDiv(event,this);">
    3
  </div>
</div>

1 2 3 and when I click 3 the result must be 1 3 2 from this result and I click on 1 it's must be 3 1 2

javascripthtmljquerycssswap


Solution 1:[1]

function swapDiv(event, elem) {
    // get all elements in .all-div-container
    const allElements = [...elem.parentElement.children];
    // get index of target elem
    const targetIndex = allElements.indexOf(elem);
    // get center element
    const centerElem = allElements[1];
    // exit from function if we clicked at center elem
    if (elem === centerElem) return;
    // move center element
    if (targetIndex === 0) {
        elem.parentElement.prepend(centerElem)
    } else {
        elem.parentElement.append(centerElem)
    }
}
<div class="all-div-container">
    <div class="div1" onclick="swapDiv(event,this);">
        1
    </div>
    <div class="div2" onclick="swapDiv(event,this);">
        2
    </div>
    <div class="div3" onclick="swapDiv(event,this);">
        3
    </div>
</div>

Solution 2:[2]

Consider the following.

$(function() {
  $(".all-div-container > div").click(function(event) {
    if ($(this).index() == 0) {
      return false;
    }
    var $prev = $(this).prev();
    var $self = $(this).detach();
    $prev.before($self);
  });
});
.all-div-container>div {
  height: 2em;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="all-div-container">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
</div>

You did not clarify what should happen if the first item is clicked. This code will swap the clicked element and the previous element.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Pete Pearl
Solution 2 Twisty

Related Questions