0
123
Views¿Cómo muevo un elemento de 1 lista a otra lista en HTML?
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.
2 answers
Answer question0
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>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.