Comentário: Antes do HTML5, para implementar operações de arrastar e soltar dos elementos da página da web, era necessário confiar no Mousedown, Mousemove, MouseUp e outras APIs para implementá -las através de uma grande quantidade de código JS. Agora o HTML5 simplifica bastante a dificuldade de operações de arrastar e soltar dos elementos da página da web. Além de apoiar o arrasto e a queda de elementos dentro do navegador, a API também suporta arrastar dados entre o navegador e outros aplicativos.
Antes do HTML5, para implementar operações de arrastar e soltar dos elementos da página da web, precisamos confiar no Mousedown, Mousemove, MouseUp e outras APIs para implementá -las através de uma grande quantidade de código JS; O HTML5 apresenta uma API que suporta diretamente operações de arrastar e soltar, o que simplifica bastante a dificuldade de programar operações de arrastar e soltar dos elementos da página da web. Além de apoiar o arrasto e a queda de elementos dentro do navegador, essas APIs também suportam o arrasto de dados entre o navegador e outros aplicativos.
Este artigo usa um exemplo simples para demonstrar como usar APIs de arrastar e soltar no HTML5.
Cena:
Conforme mostrado na figura abaixo, queremos implementar:
Arraste a foto da área esquerda do álbum para a área da lata de lixo direita, arrastando e caindo; Durante o processo de arrasto, a parte do lembrete quente deve ser prontamente lembrada e a operação de arrastar e soltar está sendo realizada no momento;
Método de implementação:
Como mostrado na interface acima, o código HTML é relativamente simples, como segue:
<! Doctype html>
<html>
<head>
<title> html5 implementa a operação de arrastar e soltar </title>
<meta charset = "utf-8"/>
<estilo>
.álbum
{
Border: 3px tracejado #CCC;
flutuar: esquerda;
margem: 10px;
Min-altura: 100px;
preenchimento: 10px;
Largura: 220px;
}
</style>
</head>
<corpo ">
<div>
<H2> Lembrete quente: você pode arrastar as fotos diretamente para o lixo pode </h2>
</div>
<div>
<H2> Álbum </h2>
<img draggable = "true" src = "img /bg_01.png" />
<img draggable = "true" src = "img /bg_02.png" />
<img draggable = "true" src = "img /bg_03.png" />
</div>
<div>
<H2> lixo pode </h2>
</div>
<br/>
</body>
</html>
NOTA: Se você deseja implementar operações de arrastar e soltar, precisará adicionar draggable = atributo True aos elementos a serem arrastados e descartados;
Em seguida, adicione o seguinte código JS ao evento Onload. Os comentários são mais detalhados e não serão explicados separadamente.
<Cript>
function init () {
var info = document.getElementById ("info");
// Obtenha os elementos de arrastar e soltar. Este exemplo é o div, onde o álbum está localizado.
var src = document.getElementById ("Álbum");
// Comece a operação de arrastar e soltar
src.ondragstart = function (e) {
// Obtenha a identificação da foto de arrastar e drop
var dragimgid = e.target.id;
// recebe o elemento arrastado
var dragimg = document.getElementById (dragimgid);
// A operação de arrasto e solteira termina
dragimg.ondragend = function (e) {
// Recuperar a mensagem de lembrete
info.innerhtml = "<H2> Lembrete criativo: você pode arrastar as fotos diretamente para o lixo pode </h2>";
};
e.datatransfer.setData ("text", dragimgid);
};
// arrastar e soltar processo
src.ondrag = function (e) {
info.innerhtml = "<H2>-A foto está sendo arrastada-</h2>";
}
// Obtenha o elemento alvo de arrastar e soltar
var no destino = document.getElementById ("Trash");
// fechar o processamento padrão;
Target.ondRaGenter = function (e) {
E.PreventDefault ();
}
Target.ondragover = function (e) {
E.PreventDefault ();
}
// algo arrasta e cai para o elemento alvo
Target.ondrop = function (e) {
var draggedId = e.datatransfer.getData ("text");
// Obtenha o objeto DOM no álbum
var OldElem = document.getElementById (DraggedId);
// exclua o nó da foto do álbum div
OldElem.parentnode.removeChild (OldElem);
// Adicione a foto arrastada nó DOM ao lixo div;
Target.AppendChild (OldElem);
info.innerhtml = "<H2> Lembrete criativo: você pode arrastar as fotos diretamente para o lixo pode </h2>";
E.PreventDefault ();
}
}
</script>
Perceba o efeito: