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

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

请帮忙。

Answer 1

您可以通过选择第二个元素并将其添加到带有类“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>