Aviso : tente ler a propriedade "tagName" em null em /home/mrexamples/public_html/wp-content/themes/awaken/functions.php na linha 1055
Aviso : tente ler a propriedade "nodeValue" em null em /home/mrexamples/ public_html/wp-content/themes/awaken/functions.php na linha 1059
API de arrastar e soltar HTML
Hoje, o tópico de nossa discussão é arrastar e soltar HTML . Neste artigo, você aprenderá como arrastar e soltar qualquer elemento HTML .
Exemplo

Coloque a imagem mrexamples dentro do retângulo arrastando-a.
- API de arrastar e soltar HTML:
- Arrastar e soltar:
- Eventos de arrastar:
- Compatibilidade do navegador:
- Exemplo de Arrastar e Soltar HTML:
- Crie um elemento arrastável:
- ondragstart e setData() – O que arrastar?:
- Ondragover – Onde cair?:
- Faça o Drop – ondrop:
- HTML arrastando texto:
- HTML arrastável:
- Uso de arrastar e soltar HTML:
Arrastar e soltar:
Usar o mouse para arrastar e soltar itens é uma prática frequente com arrastar e soltar HTML . É “pegar” um objeto e reposicioná-lo em algum lugar.
Eventos de arrastar:
A capacidade de arrastar e soltar em HTML é baseada em modelos de eventos DOM , com eventos de arrastar originados de eventos de mouse. O processo de arrastar geralmente envolve selecionar um elemento arrastável, arrastá-lo para um elemento soltável e, em seguida, soltá-lo quando se trata de arrastar e soltar HTML .
Há uma variedade de eventos que ocorrem durante as operações de arrastar, incluindo dragover e eventos de arrastar, que podem acontecer várias vezes.
Existe um manipulador de eventos relacionado para cada tipo de evento de arrastar:
Evento | Executar durante |
---|---|
dragstart |
Quando um usuário começa a arrastar um elemento ou objeto. |
drag |
Um item arrastado (seleção de imagem ou texto) é movido. |
dragleve |
O item que está sendo arrastado deixa um destino de soltura válido. |
dragend |
Quando você solta um botão do mouse ou pressiona Esc, uma operação de arrastar termina. |
dragover |
Aproximadamente a cada 0,1 segundos, um item é arrastado sobre um destino de soltar válido. |
drop |
Quando um objeto é solto em um destino de soltar válido. |
dragenter |
Itens arrastáveis inserem destinos de soltar válidos. |
Compatibilidade do navegador :
Os números da tabela denotam a primeira versão do navegador a incluir compatibilidade completa de arrastar e soltar no que diz respeito ao arrastar e soltar HTML .
API | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
Arrastar e soltar | 4.0 | 9,0 | 3.5 | 6.0 | 12,0 |
Exemplo de Arrastar e Soltar HTML:
Um cenário básico de arrastar e soltar é mostrado abaixo:
Example
Crie um elemento arrastável:
Para começar, em HTML draganddrop , o atributo draggable deve ser válido para que um elemento seja arrastado e solto.
ondragstart e setData() – O que arrastar?
Em seguida, declare o comportamento esperado do elemento arrastado.
O atributo ondragstart no exemplo de código acima chama um método drag(event), passando o evento e os dados a serem arrastados.
Você pode alterar o tipo e o valor dos dados arrastados com o método dataTransfer.setData() como se trata de arrastar e soltar HTML .
função arrastar(ev) { ev.dataTransfer.setData(“texto”, ev.target.id); }
Em HTML draganddrop , o id do elemento arrastado (“drag1”) é o valor e o tipo de dados é “texto”.
Ondragover – Onde cair?
Os dados podem ser descartados em um local predeterminado acionando o evento ondragover.
É impossível soltar dados ou elementos em outros elementos por padrão. Para permitir uma queda, devemos desabilitar o processamento padrão do elemento.
Para fazer isso, usamos o método event.preventDefault() do evento ondragover em HTML draganddrop :
event.preventDefault()
Do the Drop – ondrop
Um evento drop ocorre quando os dados que estavam sendo arrastados são liberados.
O método drop(event) é invocado no exemplo anterior por meio do atributo ondrop quando se trata de arrastar e soltar HTML :
var data = ev.dataTransfer.getData(“text”);
ev.target.appendChild(document.getElementById(data));
}
Explicação detalhada do código:
- Para impedir que o navegador processe os dados da maneira padrão, você pode usar a função preventDefault() (o padrão é abrir como o link no drop).
- O método dataTransfer.getData() pode recuperar as informações arrastadas. Qualquer informação do mesmo tipo que for enviada para setData() será retornada.
- O id do elemento é o que foi arrastado. Assim é o que você encontrará nos dados (“drag1”).
- Combinando o elemento que você arrastou com o que você soltou.
Example:
HTML Arrastando Texto
Neste exemplo de arrastar e soltar, demonstramos como arrastar o texto em uma caixa retangular:
Example:
HTML arrastável
O exemplo abaixo ilustra o uso da propriedade arrastável, há três caixas no exemplo e todas elas são arrastáveis:
Example:
Uso de arrastar e soltar HTML
Arrastar e soltar HTML é um recurso que permite aos usuários arrastar um objeto e soltá-lo em um local diferente em uma página da web. Este recurso tem várias aplicações úteis:
- Upload de arquivo: Arrastar e soltar pode ser usado para fazer upload de arquivos para um site. Os usuários podem simplesmente arrastar um arquivo de seu computador e soltá-lo no site, sem precisar navegar pelas pastas ou clicar em um botão para selecionar um arquivo.
- Classificar e reordenar: Arrastar e soltar pode ser usado para classificar e reordenar elementos em uma página da web. Por exemplo, os usuários podem arrastar e soltar itens em um carrinho de compras para alterar sua ordem ou arrastar e soltar itens em uma lista de tarefas para priorizá-los.
- Jogos interativos: arrastar e soltar pode ser usado para criar jogos interativos e quebra-cabeças em uma página da web. Os usuários podem arrastar e soltar objetos para resolver quebra-cabeças, construir estruturas ou completar desafios.
- Automação do fluxo de trabalho: arrastar e soltar pode ser usado para automatizar fluxos de trabalho e simplificar tarefas complexas. Os usuários podem arrastar e soltar arquivos, pastas ou outros elementos para acionar processos automatizados, como conversões de arquivos ou análise de dados.