单击按钮切换div位置

Question

简要说明：我在div1的旁边有div2和<div>。右键单击，我打开上下文菜单，其中有一个按钮 switch 。

点击此按钮后，我希望div1和div2切换位置，

所附图片供您参考：

这是我的代码：

$(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>

链接到jsfiddle

  

在单击切换按钮时，div1应该与div2切换位置。我的意思是，无论它们处于什么位置，都应该切换。

请帮助。

Answer 1

您可以选择第二个元素，并将其添加到div类“ click”之前使其成为div，以使其成为第一个元素。

$("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

您只需要选择第一个可切换元素，然后将其移动到另一个元素之后即可。演示：

$(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

我简化了很多

$(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

使用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

您可以将flex与order结合使用，并将DOM元素保留在其原始位置。
使用此技术，只需更改它们的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>