Exemplo
Executar um JavaScript quando um elemento arrastável for movida para fora de um destino de soltar:
<div ondragleave="myFunction(event)"></div> Tente você mesmo " Definição e Uso
O ondragleave atributo é acionado quando um elemento arrastável ou seleção de texto deixa um destino de soltar válido.
O OnDragEnter e eventos OnDragLeave pode ajudar o usuário a entender que um elemento arrastável está prestes a entrar ou sair de um destino de soltar. Isto pode ser feito, por exemplo, definir uma cor de fundo, quando o elemento arrastável entra no alvo gota, e a remoção da cor quando o elemento é deslocado para fora do alvo.
Arrastar e soltar é uma característica muito comum em HTML5. É quando você "pegar" um objeto e arrastá-lo para um local diferente. Para mais informações, consulte o nosso Tutorial HTML em HTML5 Drag and Drop .
Nota: Para fazer com que um elemento arrastável, usar o HTML5 mundial draggable atributo.
Dica: links e imagens podem ser arrastados por padrão, e não precisa do draggable atributo.
Há muitos atributos de eventos que são usados, e pode ocorrer, nas diferentes fases de uma operação de arrastar e soltar:
- Eventos disparados no alvo draggable (o elemento de origem):
- ondragstart - acionado quando o usuário começa a arrastar um elemento
- ondrag - acionado quando um elemento está sendo arrastado
- ondragend - é acionado quando o usuário terminar arrastando o elemento
- Eventos disparados sobre o destino de soltar:
- ondragenter - acionado quando o elemento arrastado entra no destino de soltar
- ondragover - acionado quando o elemento arrastado é sobre o destino de soltar
- ondragleave - acionado quando o elemento arrastado deixa o destino de soltar
- ondrop - acionado quando o elemento arrastado é solto sobre o destino de soltar
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente o event atributo.
| atributo do evento | |||||
|---|---|---|---|---|---|
| ondragleave | 4.0 | 9 | 3,5 | 6 | 12.0 |
Diferenças entre HTML 4.01 e HTML5
O ondragleave atributo é novo em HTML5.
Sintaxe
<elementondragleave=" script ">
Os valores dos atributos
| Valor | Descrição |
|---|---|
| script | O script a ser executado no OnDragLeave |
Detalhes técnicos
| tags HTML suportados: | Todos os elementos HTML |
|---|
Páginas relacionadas
HTML Tutorial: arrastar e soltar HTML5
Referência HTML: HTML Atributo draggable
HTML DOM Referência: OnDragLeave Evento