HTML component for selecting multiple items

Question

HTML component for selecting multiple items

Navigation

#1 by (2 votes)
#2 by (-1 votes)

1

I need to know the name of this component and the logic of this component in Javascript. If you can indicate something with ' drag n drop ', it would be even better.

The text in BLACK is the components and ASH are the explanations (transcribed below).

Items Available to Activate

Items Transition Arrows

Active Items

javascript html5 ux drag-n-drop

asked by anonymous 20.05.2017 / 05:38

2 answers

-1

Speak Thales, okay?

I do not exactly know the name of this 'drag n drop', but I did a search and found a tutorial that explains how to do it. ;)

Doc: link

Demo: link

Other examples of drag n drop link

20.05.2017 / 09:15

Adding Datatable Features in Laravel 5.4 with AdminLTE Change the look of AlertDialog to the old one

score 2 · Accepted Answer

I do not know a ready component that does this - whether in HTML5 or using some library or framework. The logic, however, is quite simple:

On the left and right you have components that allow multiple selection (eg a select with attribute multiple , or something more complex);
When you click the right arrow button, you will get all the selected elements in the list on the left and transfer them to the list on the right;
Same as the left arrow, just reversing the lists.

Here is a simple example, using select multiple (similar to the one used in Django):

function mover(fonte, destino) {
  var selecionados = fonte.querySelectorAll("option:checked");
  for ( var i = 0 ; i < selecionados.length ; i++ ) {
      fonte.removeChild(selecionados[i]);
      destino.appendChild(selecionados[i]);
  }
}

document.querySelector("button.dir").onclick = function() {
    mover(document.querySelector("select.esq"),
          document.querySelector("select.dir"));
};

document.querySelector("button.esq").onclick = function() {
    mover(document.querySelector("select.dir"),
          document.querySelector("select.esq"));
};

<div style="display:flex">
 <select multiple class="esq">
  <option>Item A</option>
  <option>Item B</option>
  <option>Item C</option>
  <option>Item D</option>
  <option>Item E</option>
 </select>
 <div style="display:flex; flex-direction:column">
  <button class="dir">▶</button>
  <button class="esq">◀</button>
 </div>
 <select multiple class="dir"></select>
</div>

So just adapt to be more like what you want. In this second example, I replaced select multiple with a list in which each item has a checkbox to mark the selection, and I used the drag-and-drop functionality of jQuery UI so that items can also be moved like this:

function mover(fonte, destino) {
  var selecionados = fonte.querySelectorAll("li input:checked");
  for ( var i = 0 ; i < selecionados.length ; i++ ) {
      var li = selecionados[i].parentNode.parentNode;
      fonte.removeChild(li);
      destino.appendChild(li);
      selecionados[i].checked = false;
  }
}

document.querySelector("button.dir").onclick = function() {
    mover(document.querySelector("ul.esq"),
          document.querySelector("ul.dir"));
};

document.querySelector("button.esq").onclick = function() {
    mover(document.querySelector("ul.dir"),
          document.querySelector("ul.esq"));
};

// Drag-and-drop
$( function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><divstyle="display:flex">
 <ul id="sortable1" class="esq connectedSortable" style="list-style-type: none;">
  <li><label><input type="checkbox"> Item A</label></li>
  <li><label><input type="checkbox"> Item B</label></li>
  <li><label><input type="checkbox"> Item C</label></li>
  <li><label><input type="checkbox"> Item D</label></li>
  <li><label><input type="checkbox"> Item E</label></li>
 </ul>
 <div style="display:flex; flex-direction:column; margin-left: 10px">
  <button class="dir">▶</button>
  <button class="esq">◀</button>
 </div>
 <ul id="sortable2" class="dir connectedSortable" style="list-style-type: none;"></ul>
</div>