arrastar e soltar JavaScript

Resumo: neste tutorial, você aprenderá sobre a API de arrastar e soltar JavaScript.

Introdução para JavaScript Drag and Drop API

HTML5 introduziu formalmente a especificação de arrastar e soltar. A maioria dos navegadores modernos implementou arrastar e soltar nativo com base nas especificações HTML5.

Por padrão, apenas imagem e texto podem ser arrastados. Para arrastar uma imagem, basta segurar o botão do mouse e movê-la. Para arrastar o texto, você precisa destacar algum texto e arrastá-lo da mesma maneira que arrastaria uma imagem.

A especificação HTML5 especifica que quase todos os elementos podem ser arrastados. Para tornar um elemento arrastável, você adiciona a propriedade draggable com o valor de true à sua tag HTML. Por exemplo:

Code language: HTML, XML (xml)

Eventos em elementos arrastáveis

Quando você arrasta um elemento, esses eventos são disparados na seguinte sequência:

• dragstart
• drag
• dragend

Quando você mantém o botão do mouse pressionado e começa a movê-lo, o evento dragstart dispara no elemento arrastável que você está arrastando. O cursor muda para um símbolo de não soltar (um círculo com uma linha) para indicar que você não pode soltar o elemento em si mesmo.

Após o dragstart o evento dispara, o evento drag dispara repetidamente, desde que você arraste o elemento.

E o evento dragend dispara quando você para de arrastar o elemento.

O destino de todos os eventos (e.target) é o elemento que está sendo arrastado.

Por padrão , o navegador não altera a aparência do elemento arrastado. Portanto, você pode personalizar sua aparência com base em suas preferências.

Eventos em alvos de soltar

Quando você arrasta um elemento sobre um alvo de soltar válido, esses eventos são disparados na seguinte sequência:

• dragenter
• dragover
• dragleave ou drop

O evento dragenter dispara logo conforme você arrasta o elemento sobre um alvo de soltar.

Depois que o evento dragenter dispara, o evento dragover dispara repetidamente contanto que você arraste o elemento dentro do limite do alvo de soltar.

Quando você arrasta o elemento para fora do limite do alvo de soltar, o dragover o evento para de ser disparado e o dragleave evento é disparado.

Caso você solte o elemento no destino, o drop o evento dispara em vez do evento dragleave.

O alvo ( ) do dragenter, dragover, dragleave e drop são os elementos de destino de liberação.

Destino de liberação válido

Quase todos os elementos suportam eventos de destino de liberação (dragenter, dragover, dragleave e drop). No entanto, eles não permitem o descarte por padrão.

Se você soltar um elemento sobre um alvo de descarte que não permite o descarte, o evento drop venceu t fire.

Para transformar um elemento em um destino de descarte válido, você pode substituir o comportamento padrão de dragenter e dragover eventos chamando o método event.preventDefault() em seus manipuladores de eventos correspondentes. (Consulte a seção de exemplo para obter mais informações)

Transferir dados usando o objeto dataTransfer

Para transferir dados em uma ação de arrastar e soltar, você usa o dataTransfer objeto.

O objeto dataTransfer é uma propriedade do evento. Ele permite que você transfira dados do elemento arrastado para o destino de soltar.

O objeto dataTransfer tem dois métodos: setData() e getData().

O setData() permite que você defina os dados da operação de arrastar para o formato e dados especificados :

Code language: CSS (css)

O formato pode ser text/plain ou text/uri-list. E os dados podem ser uma string que representa os dados a serem adicionados ao objeto de arrastar.

O método getData() recupera os dados de arrastar armazenados pelo .

O getData() aceita um argumento:

O formato pode ser text/plain ou text/uri-list. O getData() retorna uma string armazenada pelo método setData() ou uma string vazia se a operação de arrastar não incluir dados.

Exemplo de arrastar e soltar do JavaScript

Iremos desenvolver o seguinte aplicativo simples de arrastar e soltar para demonstrar a API de arrastar e soltar do JavaScript:

Crie o estrutura do projeto

Primeiro, crie uma nova pasta chamada drag-n-drop-basics. Dentro desta pasta, crie duas subpastas chamadas css e js.

Em segundo lugar, crie um novo arquivo chamado app.js na pasta js, style.css na css pasta e index.html na drag-n-drop-basics pasta.

Terceiro, coloque o link para style.css e tag de script que se vincula ao app.js no index.html arquivo como este:

Crie o arquivo index.html

Coloque o seguinte código no arquivo index.html:

Neste arquivo index.html, usamos o elemento .container para alinhar o título e o elemento drop-targets.

Dentro do elemento drop-targets, nós colocou três div elementos com a mesma classe box. E colocamos outro elemento div com a classe item na primeira caixa.

Se você abrir o index.html e tente arrastar a caixa amarela, você verá o cursor indicando que você não pode arrastar:

Para tornar o elemento arrastável, você adiciona a propriedade draggable com o valor de true à sua tag HTML da seguinte maneira:

Code language: JavaScript (javascript)

Agora, se você salvar o index.html, abra-o no navegador novamente, você verá que pode arrastar o elemento do item assim:

Manipular eventos no elemento arrastável

O arquivo style.css tem o .hide classe que oculta um elemento:

Code language: CSS (css)

No arquivo app.js, você adiciona o seguinte código:

Como eu t funciona:

• Primeiro, selecione o elemento arrastável usando querySelector().
• Segundo, anexe um dragstart manipulador de eventos para o elemento arrastável.
• Terceiro, defina a dragStart() função para lidar com dragstart event.

Se você abrir o arquivo index.html e começar a arrastar o elemento arrastável, verá a mensagem drag starts... em o console.

No manipulador de eventos dragStart, você precisa armazenar o id do elemento arrastável. E você precisa ocultá-lo:

Se você arrastar o elemento, verá que ele desaparece assim que começar a arrastar.

Para resolver isso, use o setTimeout() função:

Agora, você pode arrastar o elemento arrastável para fora de sua posição original:

Manipular eventos em destinos de soltar

O arquivo style.css também tem uma classe CSS chamada .drag-over que transforma o estilo da borda do alvo de soltar em tracejado e vermelho:

Code language: CSS (css)

No app.js, você precisa para selecionar os elementos de destino de soltar e lidar com dragenter, dragover, dragleave e drop eventos desses elementos:

O estilo da borda do destino de soltar deve mudar quando dragenter e dragover evento ocorre. Ele deve restaurar o estilo quando os eventos dragleave e drop ocorrerem.

Para fazer isso, você adiciona e remove a drag-over classe para o drop destino assim:

Agora, se você arrastar o elemento arrastável para outro soltar alvo, você verá que a borda do alvo de soltar muda conforme mostrado na seguinte imagem:

Para tornar o alvo de soltar válido, você precisa chamar event.preventDefault() no dragenter e dragover manipuladores de eventos como este:

Se você não fizer isso, o evento drop nunca disparar porque o elemento div não é um destino de soltar válido por padrão.

Se você arrastar o elemento arrastável para um alvo de soltar, verá que o cursor alterações indicando que você pode descartar o elemento:

Agora, se você soltar o elemento do item, verá que ele desaparece imediatamente.

Para resolver isso problema, você precisa adicionar manipular o evento drop.

• Primeiro, obtenha o id do elemento arrastável usando o método getData() do dataTransfer objeto.
• Segundo, anexe o elemento arrastável como um elemento filho do elemento de destino para soltar.
• Terceiro, remova o hide classe do elemento draggable.

O código a seguir mostra o drop manipulador de eventos:

Se você arrastar e soltar o elemento arrastável agora, ele deve funcionar conforme o esperado.

O seguinte mostra o arquivo app.js completo:

E aqui está o link para a demonstração.

Resumo

• Adicione a propriedade draggable com o valor de true a um elemento para torná-lo arrastável.
• O dragstart, drag e dragend os eventos são disparados no elemento arrastável.
• O dragenter, dragover, ou drop eventos disparam no destino de soltar.
• Chame o event.preventDefault() no dragenter e dragover manipuladores de eventos para tornar um elemento um destino de descarte válido.
• Use o event.dataTransfer objeto com os métodos setData() e getData() para transferir dados na operação arrastar e soltar.