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>

请更新jsfiddle，不要在解决方案中给div赋予任何ID。

感谢您的宝贵时间。

Answer 1

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

修改

的第21行

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

到

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

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

Answer 2

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

这将解决它。

左/右切换div不能正常工作

2 个答案: