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:

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=".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>

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:

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./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.

• javascript
• jquery
• css
• html

• 1 no working on nputing server :) – user8055794 Commented Oct 25, 2018 at 8:07
• @lois6b pretty sure you can style Win7 like that with a theme. It might even be built in. Looks like a Win7 toolbar to me. – ADyson Commented Oct 25, 2018 at 8:07
• on your fiddle while clicking on the first div it switches both. whats exactly your problem ? – lois6b Commented Oct 25, 2018 at 8:08
• 1 i want them to switch by clicking on "switch" button option which open by right clicking the context menu – user8055794 Commented Oct 25, 2018 at 8:09
• 1 @JessicaStorm unbind() is deprecated in jQuery, you should be using off() (and on() as its opposite) - see documentation - it was replaced way back in jQuery 1.7 – ADyson Commented Oct 25, 2018 at 8:09

6 Answers 6

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./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>

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./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>

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./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>

$('.click').find('.switch').eq(0).appendTo($('.click'));

http://jsfiddle/ohw25Ltf/

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./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>

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;
}
})