• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

106
Vistas
¿Cómo muevo un elemento de 1 lista a otra lista en HTML?

salida_ejemplo

Hola, estoy tratando de implementar algo como esto donde el usuario puede hacer clic en un elemento y moverlo de izquierda a derecha o lista y viceversa (consulte la imagen adjunta). Es necesario realizar un seguimiento de la lista de elementos, por lo que puedo usar javascript para realizar algunos procesamientos. Vi que algunos sitios web hicieron esto antes, pero no estoy seguro de cómo se llama esto, ¿hay alguna terminología para esto? Realmente no sé qué buscar en Google, así que estoy un poco atascado actualmente. Muy apreciado si alguien puede ayudar con esto, gracias.

almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Puede agregar un detector de eventos de click a ambas listas que agregue el destino del evento a la otra lista y elimine el destino del evento.

 row1.addEventListener('click', function(e){ if(e.target != this){ row2.appendChild(e.target.cloneNode(true)); e.target.remove() } }) row2.addEventListener('click', function(e){ if(e.target != this){ row1.appendChild(e.target.cloneNode(true)); e.target.remove() } })
 .row { display: flex; }
 <div class="row"> <ul id="row1"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ul id="row2"> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> </ul> </div>

almost 3 years ago · Juan Pablo Isaza Denunciar

0

No hay un nombre formal real dedicado a esto, pero puede encontrar muchas cosas parecidas a lo que está buscando con 'lista múltiple', 'lista de selección múltiple' y 'cuadro de selección múltiple'. Angular Material también tiene un CDK para esto llamado 'droplist' , pero parece ser el único que realmente usa el término.

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda