点击按钮以切换div位置

Question

点击按钮以切换div位置

javascriptjquerycsshtml

4

简短解释：我在一个

中有div1和div2。右键单击打开上下文菜单，其中有一个“切换”按钮。

点击该按钮后，我希望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交换位置，也就是说无论它们在什么位置，它们都应该交换。

请帮忙。

- user8055794

1

不要在NComputing服务器上工作 :) - user8055794

1

我希望他们可以通过点击“切换”按钮选项来切换，该选项通过右键单击上下文菜单打开。 - user8055794

1

@JessicaStorm，jQuery中的unbind()已经被弃用了，你应该使用off()（以及它的相反函数on()）- 参见文档 - 它在jQuery 1.7中就已经被替换了。 - ADyson

好的，已经注意到了。谢谢您提供的信息 @ADyson - user8055794

你能否帮我更新一下我的 Fiddle，这会很有帮助。 - user8055794

显示剩余2条评论

6个回答

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>

- ADyson

这里我们点击什么？ - Gerard

@Gerard，你可以在主区域右键单击以显示上下文菜单，然后单击“切换”按钮。就像问题描述的那样，并且在原始代码中已经可用。我所做的只是添加了实际执行切换的代码。 - ADyson

1

好的，明白了。 - Gerard

2

我简化了很多

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

- Ty Kroll

1

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

http://jsfiddle.net/ohw25Ltf/

- Ercan Peker

请检查这个fiddle - http://jsfiddle.net/ohw25Ltf/7/，右键单击并点击切换，右侧应该切换到左侧，但实际上它向下移动了，有什么问题，请帮忙。 - user8055794

你添加了一行，所以你的新代码应该是：$('.click .row').find('.switch').eq(0).appendTo($('.click .row')); http://jsfiddle.net/ercanpeker/ju2h07yb/ - Ercan Peker

1

你可以使用 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>

- Maor Refaeli

0

用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;
}
})

- Jack Bashford

为什么需要一个ID？它们已经有一个共同的类，并且很容易知道哪个是当前的。 - ADyson

请你能否在Fiddle上更新一下，这样我就可以运行和测试了。如果能够在没有ID的情况下实现这个目标，那将是一个更好的解决方案。 - user8055794

@ADyson 抱歉，我处于开发模式（易于编辑）将进行修复。 - Jack Bashford

@ADyson 现在已经修复了，有没有改善？ - Jack Bashford

@ADyson，冗长的代码是与压缩的代码相反的。 - Jack Bashford

显示剩余4条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lois6b · Accepted Answer

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