1

Estou precisando saber o nome deste componente e a lógica deste componente em Javascript. Caso vocês possam indicar algum com 'drag n drop', seria melhor ainda. inserir a descrição da imagem aqui

Os texto em PRETO são os componentes e os CINZAS são as explicações (transcritas abaixo).

Items Disponiveis para Ativar

Setas para Transição dos Items

Items Ativos

2
  • Não sei se existe um componente pronto com essa funcionalidade, me parece mais um padrão que usa vários componentes para se atingir a um objetivo (selecionar um subconjunto de itens de um conjunto). De todo modo, sugiro dar uma olhada nesse exemplo no jQuery UI para uma forma de fazer isso usando drag-and-drop (não é uma solução completa, mas é um bom ponto de partida).
    – mgibsonbr
    Commented 20/05/2017 às 3:59
  • Como eu tinha falado em relação a este componente, não é necessário que o mesmo seja 'Drag n Drop', mas que utilize as setas para separar o conteúdo disponível do conteúdo requerido, como é feito em muitas interfaces de painel de controle Commented 20/05/2017 às 17:46

2 Respostas 2

2

Não conheço um componente pronto que faça isso - seja em HTML5 ou usando alguma biblioteca ou framework. A lógica, no entanto, é bastante simples:

  • À esquerda e à direita você tem componentes que permitem seleção múltipla (ex.: um select com atributo multiple, ou algo mais complexo);
  • Ao clicar no botão com a seta pra direita, pega-se todos os elementos selecionados na lista da esquerda e os transfere pra lista da direita;
  • Idem pra seta pra esquerda, apenas invertendo as listas.

Aqui está um exemplo simples, usando select multiple (semelhante ao usado no 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>

Então é só adaptar para ficar mais parecido com o que você quer. Nesse segundo exemplo, eu substituí o select multiple por uma lista em que cada item possui um checkbox para marcar a seleção, e usei a funcionalidade de drag-and-drop do jQuery UI para que os itens possam ser movidos também dessa forma:

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>
<link rel="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>

<div style="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>

1
  • simplesmente perfeito, era isso que eu queria, para implementar no meu sistema, muito obrigado @mgibsonbr Commented 21/05/2017 às 2:10
-1

Fala Thales, tudo bem?

Eu não sei exatamente o nome desse 'drag n drop', mas dei uma pesquisada e achei um tutorial que te explica como fazer. ;)

Doc: http://www.daviferreira.com/posts/interface-drag-and-drop-com-jquery-atualizado

Demo: http://www.daviferreira.com/blog/exemplos/draganddrop/novo.html

Outros exemplos de drag n drop http://codepen.io/search/pens/?limit=all&page=2&q=drag+n+drop

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .