点击按钮切换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>

link 到 jsfiddle

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

请帮忙。

Answer 1

您可以通过选择第二个元素并将其添加到 div 和 class "click" 前面，使其成为第一个元素。

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

在 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 3

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

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

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

http://jsfiddle.net/ohw25Ltf/

Answer 5

我简化了很多

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

点击按钮切换div个位置

click button to switch div positions

html

javascript

css

jquery

webpage