Home / Questions / 73745
Accepted
Antonio
Asked: 2020-05-28 11:30:47 +0800 CST 2020-05-28 11:30:47 +0800 CST

如何在按下按钮时将所有 div 从一个容器移动到另一个容器？

  • 772

我有一个div带有分支的id分支，除此之外，我还有另一个div带有所选分支的空分支id，我需要通过单击按钮pasar 将所有div 内容 传递Sucursales 给seleccionadas

$("#pasar").click(function(){
    // ?????????
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="Sucursales">
    <div class="Sucursal">sucursal 1</div>
    <div class="Sucursal">sucursal 2</div>
    <div class="Sucursal">sucursal 3</div>
</div>
<div id="Seleccionadas">

</div>
<button id="Pasar"></button>

jquery

4 Answers

  1. Best Answer

    首先是选择我们感兴趣的 div，例如所有类 items .Sucursal，或者如果您更喜欢所有 div 的直接子级#Sucursales。

    elementos = $("#Sucursales > div");
// elementos = $("#Sucursales > .Sucursal"); // otra opción

    然后只需要使用appendTo()将它们添加到目标容器中：

    elementos.appendTo('#Seleccionadas');

    但是，如果我们还希望它们保留所有关联事件，则必须首先调用detach()：

    elementos = $("#Sucursales > div").detach();
elementos.appendTo('#Seleccionadas');

    代码

    $('#Pasar').on('click', function(){
    $("#Sucursales > div").detach()
                          .appendTo('#Seleccionadas');
});
    #Sucursales {
    border: 1px solid green;
    min-height: 50px;
}

#Seleccionadas {
    border: 1px solid red;
    min-height: 50px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="Sucursales">
    <div class="Sucursal">sucursal 1</div>
    <div class="Sucursal">sucursal 2</div>
    <div class="Sucursal">sucursal 3</div>
</div>
<button id="Pasar">Seleccionar</button>

<div id="Seleccionadas">

</div>

    • 6

  2. 我突然想到，您可以分离（） .branch 类的所有元素，然后将它们附加到 #selected 元素，类似这样吗？

    $('#pasar').click(function() {
  $(".sucursal").detach().appendTo($("#seleccionadas"));
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sucursales">
  <div class="sucursal">sucursal 1</div>
  <div class="sucursal">sucursal 2</div>
  <div class="sucursal">sucursal 3</div>
</div>
<button id="pasar">Pasar</button>

<div id="seleccionadas">
</div>

    • 6

  3. 上面的所有答案都有效，但您可能希望为每个答案使用一个按钮，而不是一个按钮来添加所有选项。

    为此，您必须确定您按下的按钮的值，它指的是哪个元素。

    也可能是您想要添加所有元素，但是它将通过复选框来控制，以决定您不想添加哪些以及哪些不想添加，如果是，请再次咨询，我会告诉您如何做。

        $(document).ready(function() {
        $('.mover').click(function() {
	        var id = $(this).attr('value');
        	$('.Sucursal'+id).appendTo('#Seleccionadas');
        })
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Sucursales">
        <div class="Sucursal1">sucursal 1<button class="mover" style="width:200px;" value="1">      Mover</button></div>
        <div class="Sucursal2">sucursal 2<button class="mover" style="width:200px;" value="2"> Mover2</button></div>
        <div class="Sucursal3">sucursal 3<button class="mover" style="width:200px;" value="3"> Mover3</button></div>
    <div id="Seleccionadas" style="background-color:#000; color:#FFF;">

</div>

    • 6

  4. 您好，我确实有类似的查询...希望您能帮助我。二

    • DIV A卡片的网格视图拖放
    • DIV B已发送卡片的容器拖到此处稍后打印（简单）

    它工作得很好，但我发现的唯一问题是，当以移动分辨率移动屏幕时，拖放是无用的，或者非常不舒服。并尝试实现您提供的最后一个示例，唯一让我失败的是它有一个固定的类，当在我的项目中它们都是相同的并且我不需要区分它们，所以我只需要一个按钮将它们发送到课堂，无需多言。

    附上链接，因为我在codepen中布局了很长时间，我希望它不是问题。 例子

    • 0