JavaScript é uma das linguagens de programação mais populares, equipada com mais de 24 frameworks e cerca de 84 bibliotecas. É a única linguagem de programação intrinsecamente suportada por todos os navegadores. Além disso, a linguagem suporta tipagem dinâmica e é excelente para renderização e animação. Você pode aproveitar o JavaScript para adicionar comportamento interativo no front-end, controlar o back-end, criar aplicativos web e móveis e muito mais. A opção de adicionar efeitos a qualquer site e torná-lo personalizável torna a linguagem uma das favoritas entre os desenvolvedores globalmente.
Neste guia, nós iremos guiar você pelos passos de criação de elementos de arrastar e soltar usando JavaScript Vanilla puro. Além disso, daremos um passo adiante e construiremos um aplicativo “Agendador Matinal” usando os HTML Drag and Drop API manipuladores de eventos.
Pré-requisitos
Para acompanhar este tutorial, você deve ter:
Passo 1: Criar um Novo Projeto
Comece criando um contêiner com dois elementos filhos. Usaremos o primeiro elemento filho para arrastar e o segundo elemento filho para armazenar os elementos arrastados.
|
Nota: Neste tutorial, trataremos os contêineres como um depósito para manter todos os elementos arrastados. Em termos simples, todos os elementos arrastados do primeiro filho serão soltos no segundo filho. |
|
1 |
$ mkdir drag-and-drop-demo |
Em seguida, use o cd comando para alterar o diretório para a pasta drag-and-drop-demo :
|
1 |
$ cd drag-and-drop-demo |
Passo 2: Configuração Inicial
Neste tutorial, criaremos arquivos HTML, CSS e JavaScript e os conectaremos. Primeiro, nomeie os arquivos como index.html, styles.css, e scripts.js respectivamente.
Em seguida, adicione o título como “Meu Planejador Matinal” no arquivo index.html :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Meu Planejador Matinal</title> </head> <body> </body> </html> |
Em seguida, vincule o CSS e adicione o JavaScript ao HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> <title>Meu Planejador Matinal</title> </head> <body> </body> </html> |
Em seguida, adicione as seguintes linhas de código nas tags <body> tags:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> <title>Meu Planejador Matinal</title> </head> <body> <div class="container"> <h1><center>MEU PLANEJADOR MATINAL</center></h1> <h2 class="draggable" draggable="true">Ir à Academia</h2> <h2 class="draggable" draggable="true">Ler por 30 minutos</h2> <h2 class="draggable" draggable="true">Preparar Mingau de Aveia</h2> </div> <div class="container"> <h2 class="draggable" draggable="true">Tomar um Banho Frio</h2> <h2 class="draggable" draggable="true">Começar o meu Dia</h2> </div> </body> </html> |
Salve e feche o arquivo index.html. Depois disso, tente abrir o arquivo index.html no seu navegador e você verá uma página se abrindo:
A seguir, vamos estilizar o nosso index.html usando CSS para deixá-lo apresentável.
Passo 3: Estilização usando CSS
Em seguida, adicione estilos em todos os elementos que incluímos no nosso arquivo index.html :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
body { margin: 0; } .container { background-color: #DEB887; padding: 1rem; margin-top: 1rem; } .draggable { padding: 1rem; background-color: #FAF0E6; border: 1px solid #708090; cursor: move; } |
Tente abrir o arquivo index.html no seu navegador e veja o resultado:
Embora tenhamos concluído a estruturação e adicionado os estilos, os elementos ainda estão estáticos. Isso significa que não podemos mover ou rolar os elementos até adicionarmos recursos dinâmicos a eles. No próximo passo, daremos as boas-vindas ao JavaScript e aos comportamentos dinâmicos.
Passo 4: Introduzindo o JavaScript
Neste passo, vamos introduzir o JavaScript e tornar todos os elementos de arrastar funcionais. No arquivo JS, defina os elementos que vamos precisar. Vamos definir draggable e containers para arrastar e soltar elementos, respectivamente.
Adicione as duas linhas de código no scripts.js arquivo:
|
1 2 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') |
A seguir, configure todos os event listeners. Comece adicionando o elemento “dragstart” como o primeiro event listener para add a lista de classes. Da mesma forma, adicione o elemento “dragend” como o segundo event listener para remove a lista de classes.
Anexe os seguintes EventListeners no seu scripts.js arquivo:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') draggables.forEach(draggable => { draggable.addEventListener('dragstart', () => { draggable.classList.add('dragging') }) draggable.addEventListener('dragend', () => { draggable.classList.remove('dragging') }) }) |
A seguir, adicione o “dragover” EventListener para passar o mouse e mover os nossos elementos. Defina o elemento draggable atual usando o querySelector e depois anexe o elemento arrastável ao container atual:
|
1 2 3 4 5 6 |
// … containers.forEach(container => { container.addEventListener('dragover', () => { const draggable = document.querySelector('.dragging') }) }) |
Por padrão, soltar dentro de um elemento está desativado. Use e.preventDefault para ativá-lo:
|
1 2 3 4 5 6 7 8 |
// … containers.forEach(container => { container.addEventListener('dragover', e => { e.preventDefault() const draggable = document.querySelector('.dragging') container.appendChild(draggable) }) }) |
A seguir, crie um elemento para determinar o posicionamento do mouse. Comece criando uma função getDragAfterElement onde ela receberá dois parâmetros. O primeiro será um container e o segundo parâmetro y cuidará da posição y do mouse. Agora, use a função querySelectorAll para obter os nossos elementos arrastáveis. Defina um draggableElements para todos os elementos arrastáveis dentro do container:
|
1 2 3 4 |
// … function getDragAfterElement(container, y) { const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')] } |
A seguir, chame uma função reduce que percorrerá a lista de elementos arrastáveis e também especificará o elemento único após o cursor do mouse. A seguir, retorne a função reduce adicionando o primeiro elemento como closest e o segundo como um child. Além disso, iguale o offset e adicione condições.
Adicione as seguintes linhas de código no scripts.js arquivo:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// … return draggableElements.reduce((closest, child) => { const box = child.getBoundingClientRect() const offset = y - box.top - box.height / 2 if (offset < 0 && offset > closest.offset){ return { offset: offset, element: child } } else { return closest } }, { offset: Number.NEGATIVE_INFINITY}).element } |
Inclua isso no scripts.js arquivo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// … containers.forEach(container => { container.addEventListener('dragover', e =>{ e.preventDefault() const afterElement = getDragAfterElement(container, e.clientY) const draggable = document.querySelector('.dragging') if (afterElement == null) { container.appendChild(draggable) } else { container.insertBefore(draggable, afterElement) } }) }) |
Agora temos a configuração necessária concluída. Abra seu navegador e execute index.html no seu navegador. Você verá a página “My Morning Scheduler” com opções de arrastar e soltar. A linha branca no meio funciona como uma ponte para diferenciar as tarefas já concluídas daquelas que ainda estão por fazer:
Conclusão
O recurso Arrastar e Soltar (Drag and Drop) é uma excelente opção para usar em sites modernos. Neste guia, usamos alguns manipuladores de eventos para facilitar o tutorial para iniciantes. Existem oito manipuladores de eventos no total e incentivamos você a usá-los à medida que avança. Assim que se sentir confortável usando as funções e o código usados neste tutorial, você poderá se aprofundar em tópicos de JavaScript como jQuery e começar a explorar. Você também pode tentar criar um aplicativo de lista de tarefas (To-Do app), um rastreador de progresso semanal usando recursos de data e hora do JavaScript, e outras aplicações usando os conceitos que você acabou de aprender.
Para aprender mais sobre JavaScript e tópicos de desenvolvimento web, confira estes recursos do nosso blog:
- Ferramentas JavaScript: localStorage e sessionStorage
- Trabalhando com JavaScript: O que são Objetos
- Um tutorial sobre como trabalhar com JSON em JavaScript
- Trabalhando com JavaScript: Como as classes funcionam
Feliz computação!
Comentários
Nenhum comentário ainda. Seja o primeiro.