单击按钮切换div位置

Question

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

Answer 1

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> 

Answer 2

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> 

Answer 3

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

http://jsfiddle.net/ohw25Ltf/

Answer 4

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> 

Answer 5

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

Answer 6

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>