javascript - 向左/向右切换 div 无法正常工作

Question

简要说明:我在 main 中有 div1 和 div2。 右键单击，上下文菜单打开，其中有一个名为switch 的按钮。

单击此按钮时 div1 和 div2 切换位置，但它们切换不正确

要求:div 应该左右切换，但它在另一个下方。

附上图片供您引用:

现在当你点击开关时，右边的向下而不是左边，见下图:

这是我的 jsfiddle link和代码:

$(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":
       $('.click').find('.switch').eq(0).appendTo($('.click'));
       break;
       
       
   }
       
       })
     
 
     // alert("add");
      });


$('.click').click(function (evt) {
  var $div = $(evt.target).first('.switch');
  $div.next('.switch').after($div);
});




/*    $(document).unbind().on("click", function(devent) {
      devent.stopPropagation();     $(".selecteddiv").removeClass('selecteddiv');
   
      alert("remove");
        
      });  
    */

      
 
      
    

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

<link rel="stylesheet" type="text/css"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">


<div class="click container-fluid" >

<div class="row">
<div class="switch col-sm-6 bg-primary">Hello</div> 
<div class="switch  col-sm-6 bg-secondary">World</div>
</div>

</div>

<ul class='custom-menu4'>
    <li data-action = "first">Switch</li>
    <li data-action = "second">Cancel</li>
</ul>

Please update jsfiddle and dont give any id to div's in the solution.

感谢您抽出宝贵的时间。

Answer 1

您通过附加到错误的元素将按钮拉出“.row”。

修改第21行

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

到

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

http://jsfiddle.net/Iulius90/mzy7nLqx/