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

how to move all divs from one container to another on button press?

  • 772

I have the one divwith the idBranches and apart from that I have another divempty one with the idselected ones, what I need is to pass with a click to the button pasar all the div contents in Sucursales aseleccionadas

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

    The first thing is to select the divs that interest us, for example all the class items .Sucursal, or if you prefer all the divs that are direct children of #Sucursales.

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

    And then they just need to be added to the target container with appendTo() :

    elementos.appendTo('#Seleccionadas');

    However, if we also want them to keep all of their associated events, detach() must be called first :

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

    Code

    $('#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. It occurs to me that you could detach() all the elements of the .branch class and then attach them to the #selected element, something like that?

    $('#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. All the answers above work, but you probably want to use a button for each and not a button to add all the options.

    To do this you have to identify the value of the button you are pressing, which element it refers to.

    It could also be the case that you want to add all the elements, but it would be controlled through the checkbox, to decide which and which ones you do not want to add, if so, consult it again and I will tell you how to do it.

        $(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. Hello, I do have a similar query... I hope you can help me. two

    • DIV A Grid view of cards Drag and drop
    • DIV B Container for sent cards Drag here to print later (simple)

    It works perfectly but the only problem I have found is that when moving the screen in a mobile resolution the Drag and drop is useless or it is super uncomfortable. And trying to implement the last example that you provided, the only thing that fails me is that it has a fixed class anchored, when in my project they are all the same and I do not need to differentiate them, so I would only need a button that sends them to the class without further ado.

    Attached link since I had it laid out in codepen for a long time, I hope it is not a problem. Example

    • 0