8

Tengo el div con el id Sucursales y aparte tengo otro div vació con el id seleccionadas lo que necesito es pasar con un clic al botón pasar todos los div contenidos en Sucursales a 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>

3
  • $('#Seleccionadas').html($('#Sucursales').html());
    – Dev. Joel
    Commented el 27 may. 2017 a las 19:40
  • @Dev.Joel con eso sería copiar el contenido exclusivamente
    – Mariano
    Commented el 27 may. 2017 a las 19:44
  • También podría ayudar esta pregunta formulada anteriormente es.stackoverflow.com/questions/54284/…) @Mariano así es.
    – Dev. Joel
    Commented el 27 may. 2017 a las 19:56

4 respuestas 4

6

Lo primero es seleccionar los divs que nos interesen, por ejemplo todos los ítems de clase .Sucursal, o si se prefiere todos los divs que son hijos directos de #Sucursales.

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

Y luego, sólo se deben agregar al contenedor destino con appendTo():

elementos.appendTo('#Seleccionadas');

Sin embargo, si también queremos que mantengan todos sus eventos asociados, primero se debe llamar a detach():

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

Código

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

0
6

Se me ocurre que podrías hacerle un detach() a todos los elementos de la clase .sucursal y después attachearlos al elemento #seleccionadas, algo así?

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

Todas las respuesta anteriores funcionan, pero probablemente lo que quieras es utilizar un botón para cada una y no un botón para añadir todas las opciones.

Para ello tienes que identificar el valor del botón que estás pulsando, a que elemento hace referencia.

También se podría dar el caso de que quieras añadir todos los elementos, pero se controlaría a través de checkbox, para decidir cual y cuales no quieres añadir, en caso de ser así vuelve a consultarlo y te diré como realizarlo.

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

0

Hola yo si que tengo una consulta tal vez parecida... espero que me puedas ayudar. 2

  • DIV A Vista grid de tarjetas Drag and drop
  • DIV B Contenedor de tarjetas enviadas Aquí arrastran para luego imprimir (simple)

Funciona perfecto pero el único problema que me he encontrado es que al trasladar la pantalla en una resolución mobil el Drag and drop no sirve de nada o resulta super incomodo. E intentando implementar el último ejemplo que aportaste lo único que me falla es que tiene anclado una clase fija, cuando en mi proyecto todos son igual y no necesito diferenciarlos por lo que tan solo necesitaría un boton que los envie a la sin mas.

Adjunto enlace ya que lo tenía maquetado en codepen desde hace tiempo espero que no sea un problema. Ejemplo

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.