click button to switch div positions

Admin 1
Viewed 1179

Brief Explanation: I have div1 and div2 onside a <div>. On right click i open context menu which has a button switch.

On clicking this button i want div1 and div2 to switch positions,

attached pic for your reference: enter image description here

here is my code:

$(document).on("contextmenu", "div", function(event) {

  // alert("right clicked");
  event.stopPropagation();
  this.clickedElement = $(this);
  event.preventDefault();
  $(this.clickedElement).addClass('selecteddiv');
  $(".custom-menu4").show();

  $(".custom-menu4 li").unbind().click(function() {
    switch ($(this).attr("data-action")) {
      case "second":
        $(".custom-menu4").hide();
        $(".selecteddiv").removeClass('selecteddiv');
        break;
      case "first":
        alert("clicked switch");
        break;
    }
  })
  // alert("add");
});
.selecteddiv {
  border: 1px solid rgb(180, 13, 172);
}

.custom-menu4 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="click" style="padding: 20px">
  <div class="switch">Hello</div>
  <div class="switch">World</div>
</div>

<ul class='custom-menu4'>
  <li data-action="first">Switch</li>
  <li data-action="second">Cancel</li>
</ul>

link to jsfiddle

On clicking the switch button, the div1 should switch position with div2, i mean in whatever positions they are, they should switch.

Please help.

webpage css html jquery javascript
6 Answers

You can do it by selecting the second element and prepending it to the div with class "click" so it becames the first. 

$("li:contains('Switch')").click(function() {

  $('div.switch:last').prependTo('.click');

})
.selecteddiv {
  border: 1px solid rgb(180, 13, 172);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="click" style="padding: 20px">
  <div class="switch">Hello</div>
  <div class="switch">World</div>
</div>

<ul class='custom-menu4'>
  <li data-action="first">Switch</li>
  <li data-action="second">Cancel</li>
</ul>

user_30454910

You just need to select the first switchable element, and move it after the other one. Demo:

$(document).on("contextmenu", "div", function(event) {

  event.stopPropagation();
  event.preventDefault();
  $('.selecteddiv').removeClass("selecteddiv");
  $(this).addClass('selecteddiv');
  $(".custom-menu4").show();

  $(".custom-menu4 li").off().click(function() {
    switch ($(this).attr("data-action")) {
      case "second":
        $(".custom-menu4").hide();
        $(".selecteddiv").removeClass('selecteddiv');
        break;
      case "first":
        /***** This is the important bit, to do the switching ****/
        var $div = $('.switch').first();
        $div.next('.switch').after($div);
        break;
    }
  })
});
.selecteddiv {
  border: 1px solid rgb(180, 13, 172);
}

.custom-menu4 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="click" style="padding: 20px">
  <div class="switch">Hello</div>
  <div class="switch">World</div>
</div>

<ul class='custom-menu4'>
  <li data-action="first">Switch</li>
  <li data-action="second">Cancel</li>
</ul>

user_59470430

I simplified this a lot

$(document).on("contextmenu","div", function(event) {
      
  event.stopPropagation();
  event.preventDefault();
  $(".custom-menu4").show();
})

$('#btn-cancel').click(function (evt) {
  $(".custom-menu4").hide();
});

$('#btn-switch').click(function (evt) {
  var $div = $('#top-divs div').first();
  $('#top-divs').append($div);
});
 .selecteddiv {
    border: 1px solid rgb(180, 13, 172);
  }
  
  .custom-menu4 {
    display: none;
    
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top-divs" style="padding: 20px">
  <div class="switch">Hello</div> 
  <div class="switch">World</div>
</div>

<ul class='custom-menu4'>
    <li id="btn-switch" data-action="first">Switch</li>
    <li id="btn-cancel" data-action="second">Cancel</li>
</ul>

user_8679450
user_72636070

You can use flex with order and keep the DOM elements in their original location.
With this technique, you could manipulate the ordering of multiple elements quite easily only by changing their order.

$(".switch-btn").click(function() {
  $('.switch').toggleClass('high-order');
})
.click {
  display: flex;
  flex-flow: column wrap;
  padding: 20px;
}

.click > div {
  order: 1
}

.click > div.high-order {
  order: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="click">
  <div>Hello</div>
  <div class="switch">World</div>
</div>

<button class="switch-btn">Switch</button>

user_19182870

Do this in JavaScript:

$(".custom-menu4 li").unbind().click(function() {
switch ($(this).attr("data-action")) {
  case "second":
    $(".custom-menu4").hide();
    $(".selecteddiv").removeClass('selecteddiv');
    break;
  case "first":
    alert("clicked switch");
    var selected = $("div.selecteddiv").html();
    var unselected = $("div").not(".selecteddiv").html();
    $("div.selecteddiv").html(unselected);
    $("div").not(".selecteddiv").html(selected);
    $(".selecteddiv").removeClass("selecteddiv");
    break;
}
})
user_102217650
Related