0
131
ViewsHow do I move item from 1 list to another list in HTML
Hi, I'm trying to implement something like this where the user can click on an item and move it from left to right div or list and vice versa (refer to attached image). The list of items needs to be tracked so I'm able to use javascript to do some processing. I saw some websites done this before but not sure what this is called, is there any terminology for this? I'm don't really know what to search on google so I'm a bit stuck currently. Greatly appreciated it if anyone can help with this, thanks.
2 answers
Answer question0
You can add a click event listener to both lists that appends the event target to the other list and deletes the event target.
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
There is no real formal name dedicated for this, but you can find many things resembling what you are looking for with 'multi list', 'multi select list' and 'multi select box'. Angular Material also has a CDK for this called 'droplist', but they seem to be the only one really using the term.