jQuery UI Logo

Draggable, sortable e droppable são elementos do jQuery UI que trabalham com arrastar, ordenar e saltar qualquer objeto dentro do DOM (seu HTML). Utilizando os três juntos você pode criar aquele sistema de arrastar e soltar que você sempre viu em sites maiores e mais modernos.

Veja o que cada um pode fazer:

  • Draggable – Permite que você arraste qualquer elemento dentro do seu HTML utilizando o mouse;
  • Sortable – Permite que você ordene e reordene os elementos dentro de um container;
  • Droppable – Permite o evento de soltar um elemento dentro de qualquer container, possibilitando uma ação específica quando o elemento é solto.

Neste artigo você vai ver como criar um sistema de arrastar, soltar, ordenar e reordenar elementos com jQuery UI. Além disso, explicarei um exemplo simples sobre como salvar os dados dos elementos temporários.

Então vamos lá!

O HTML

Para nosso HTML, precisamos do seguinte:

  • Um container para os elementos que serão arrastados;
  • Um container para os elementos que serão soltos e reordenados;
  • Um container para apagar elementos;

Veja como ficou:

<!-- Container geral de arrastar e soltar -->
<div class="drag-drop clearfix">

    <!-- Elementos que serão arrastados -->
    <div class="drag-container clearfix">
        <div class="drag">1</div>
        <div class="drag">2</div>
        <div class="drag">3</div>
    </div> <!-- .drag-container -->

    <!-- Elementos que serão soltos e reordenados -->
    <div class="drop-container clearfix">
        <p>Arraste números aqui</p>
    </div> <!-- .drop-container -->
  
</div> <!-- .drag-drop -->

<!-- Lixeira -->
<div class="lixeira">
    Arraste aqui para apagar
</div> <!-- .lixeira -->

<!-- Botão para salvar os dados -->
<button class="salvar">Salvar</button>

Se você analisar os comentários acima, poderá entender o que eu descrevi anteriormente.

O CSS

O CSS é parte fundamental do seu sistema de “Arrastar e soltar”, ele deve ser intuitivo e os elementos devem dar a possibilidade de clicar com o mouse, arrastar e soltar de maneira simples.

Veja como ficou o meu CSS:

.clearfix:after {
    content: '.';
    display: block;
    clear: both;
    height: 0;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    overflow: hidden;
}

body {
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.5;
    margin: 20px;
}

/* Drag e Drop system */
.drag-container, 
.drop-container {
    width: 50%;
    background: #333;
    font-size: 0;
    text-align: center;
    float: left;
    color: #fff;
    height: 190px;
}
.drag, 
.placeholder {
    font-size: 12px;
    width: 90%;
    height: 50px;
    line-height: 50px;
    background: #0074a2;
    margin: 10px auto;
}
.drop-container {
    background: #222;
}
.drop-container p {
    font-size: 18px;
    line-height: 190px;
}
.placeholder {
    background: none;
    border: 1px dotted #eee;
}
.lixeira {
    margin: 20px 0;
    background: #ddd;
    border: 2px dotted #999;
    text-align: center;
    line-height: 50px;
    color: #999;
    font-weight: 700;
    font-size: 18px;
}
.lixeira-ativa {
    border: 2px dotted red;  
}

Isso deverá gerar algo como a imagem abaixo:

Draggable, sortable e droppable

Draggable, sortable e droppable

Agora vamos precisar do jQuery e jQuery UI.

O jQuery e jQuery UI

Nosso sistema de arrastar e soltar irá utilizar Draggable e Sortable, apenas a lixeira utilizará droppable.

Nota: Se você não entende de jQuery, leia nosso artigo Introdução ao jQuery.

Veja como ficou o código:

$(function(){
    // Arrastar
    $('.drag').draggable({
        // Conecta com a função de reordenar
        connectToSortable: '.drop-container',
        helper: 'clone'
    });

    // Soltar e reordenar
    $('.drop-container').sortable({
        placeholder: 'placeholder',
        activate: function(event, ui){
            $('.drop-container p').remove();
        }
    });

    // Lixeira
    $('.lixeira').droppable({
        hoverClass: 'lixeira-ativa',
        drop: function(event, ui) {
            $(ui.draggable).remove();
        }
    });
    
    // Salvar
    $('.salvar').click(function(){
        var valores = new Array();
        
        $('.drop-container .drag').each(function(){
            valores.push( $(this).html() );
        });
        
        // Faça o que preferir com os valores
        alert(valores);
    });
});

Perceba que os elementos acima não precisam ser alterados, porém, a parte de “Salvar” é jQuery puro. O que eu fiz foi o seguinte:

Quando o usuário clicar no botão de salvar, verifico todos os elementos que estão no container de “soltar” e incluo os valores em um array. Depois disso, você pode fazer o que preferir com os valores, como utilizar ajax para salvar, ou continuar manipulando os dados.

Concluindo

Caso queira visualizar uma demonstração com possibilidade de edição, acesse este Codepen.

Se tiver alguma dúvida, basta comentar.