A API de arrastar e soltar é um novo recurso do HTML5. Em comparação com outros novos recursos, ela representa 60% da importância e 30% do uso no desenvolvimento real.
2. O que é arrastar e soltar?Arrastar: Arrastar
Lançamento: Soltar
Arrastar significa que o mouse clica no objeto de origem e continua movendo o objeto sem soltá-lo.
3. O que são objetos de origem e objetos de destino?Objeto fonte: refere-se a algo que clicamos com o mouse. Pode ser uma imagem, um DIV, um pedaço de texto, etc.
Objeto de destino: refere-se a quando arrastamos o objeto de origem e o movemos para uma área. O objeto de origem pode entrar nesta área, passar o mouse sobre esta área (sem soltá-lo) e soltar o objeto de origem aqui (já solte). também pode sair da área após pairar.
4. Funções relacionadas à API de arrastar e soltarDepois de explicar o que são o objeto de origem e o objeto de destino, vamos retornar à API de arrastar e soltar no front end. A partir das operações acima, podemos derivar várias funções.
Eventos que podem ser acionados pelo objeto de origem arrastado:
(1)ondragstart: O objeto de origem começa a ser arrastado
(2)ondrag: O objeto de origem está sendo arrastado (o mouse pode ou não estar se movendo)
(3) ondragend: O objeto de origem é arrastado até o final
Arraste o objeto de origem para inserir os eventos que podem ser acionados pelo objeto de destino acima:
(1) ondragenter: O objeto de destino é arrastado para o objeto de origem
(2) ondragover: O objeto de destino é arrastado pelo objeto de origem e paira acima dele.
(3) ondragleave: O objeto de origem é arrastado para longe do objeto de destino
(4) ondrop: Arraste o objeto de origem e solte/solte acima do objeto de destino
A API de arrastar e soltar tem um total de 7 funções! !
5. Como transferir dados entre o evento do objeto de origem arrastado e o evento do objeto de destinoHTML5 fornece um novo atributo para todos os eventos relacionados ao arrastar:
e.dataTransfer { } //数据传递对象
Função: Usada para passar dados entre eventos do objeto de origem e do objeto de destino
Salve os dados em um manipulador de eventos no objeto de origem:
e.dataTransfer.setData( k, v ); //kv必须都是string类型
Leia os dados em um manipulador de eventos no objeto de destino:
var v = e.dataTransfer.getData(k);
Exemplo 1: Implemente um pequeno avião que pode se mover conforme o mouse é arrastado
Dica: O avião precisa estar absolutamente posicionado! Obtenha o valor da coordenada do mouse no evento ondrag! ! !
O código é o seguinte:
<!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> body{ margin:0; </style> </head> <body> <h3>Pequeno plano que se move conforme o mouse é arrastado</h3> <img id=p3 src=img/p3.png <script> p3.ondragstart=function(e){ console.log('Origem do evento p3 começa a arrastar'); //Registra o deslocamento do mouse no plano logo após arrastar offsetX= e.offsetX= e. .ondrag=function(e){ console.log('A origem do evento p3 está sendo arrastada'); console.log(x+'-'+y); //No último momento do evento de arrastar, as coordenadas do mouse não podem ser lidas e tanto pageX quanto pageY tornam-se 0 if(x==0 && y==0 ){ return; // Não lide com a situação em que X e Y são 0 no último momento de arrastar} x-=offsetX; topo=y+'px'; p3.ondragend=function(){ console.log('Objeto de origem p3 arrastar termina');O efeito é o seguinte:
Exemplo dois:
Simula o efeito de uma lixeira em um computador. Um total de três planos pequenos são exibidos. Depois de arrastar um plano pequeno para o topo da lixeira, o plano pequeno é excluído da árvore DOM.
Dica: A exclusão requer a remoção do elemento do nó filho do DOM e o comportamento padrão do ondragover precisa ser evitado! ! Use a transferência de dados entre o objeto de origem e o objeto de destino para registrar o valor de ID da pequena aeronave! ! !
Informações importantes:
ondragover tem um comportamento padrão! ! ! É quando o ondragover é acionado, o ondrop irá falhar! ! ! ! Este pode ser um problema de versão do navegador, que só poderá ser resolvido se o navegador for atualizado continuamente no futuro! !
Como parar isso?
ondragover= function(e){ //Quando o objeto de origem está pairando sobre o objeto de destino e.preventDefault(); //Evita o comportamento padrão para que o drop possa ser acionado...}ondrop= function(e){ // O objeto de origem é liberado no objeto de destino...}O código é o seguinte:
<!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> body { text-align: center } #trash { opacity: .2; : 15px; } </style> </head> <body> <h3>Excluir elementos filhos da árvore DOM após arrastar o avião para a lixeira</h3> <img id=trash src=img/trash_full.png> <hr/> <img id=p3 class=src src=img/p3.png> <img id=p4 class=src src=img/p4.png> <img id=p5 class =src src=img/p5.png> <script> //Adiciona monitoramento de eventos para o objeto de origem - registre qual objeto de origem var foi arrastado srcList = document.querySelectorAll('.src');//Encontrar todos os elementos img for(var i=0; i<srcList.length; i++){ //Percorrer os elementos img var p = srcList[i]; = function(e){ //Comece a arrastar o objeto de origem e.dataTransfer.setData('PlaneID',this.id); p.ondrag = function(){} p.ondragend = function(){} } //Adiciona evento escutando o objeto de destino - exclui o objeto de origem arrastado trash.ondragenter = function(){ //O objeto de origem entra no destino object console .log('drag enter'); trash.style.opacity = 1; //Mude a transparência para 1 } trash.ondragleave= function(){ //Depois que o objeto de origem sai do objeto de destino, console.log(' arraste sair') ; trash.style.opacity = .2; //Altere a transparência para 0,2 } trash.ondragover= function(e){ //O objeto de origem está pairando sobre o objeto de destino e.preventDefault(); drop triggerable} trash.ondrop= function(e){ //O objeto de origem é liberado no objeto de destino console.log('drop'); //Excluir o objeto de origem arrastado var id = e.dataTransfer.getData('PlaneID'); //Obter dados--valor de id var p = document.getElementById(id); parentNode.removeChild(p); //Remover nós filhos do elemento pai} </script> </body> </html>O efeito é o seguinte:
Depois de arrastar o pequeno avião para a lixeira para excluí-lo:
Conforme mostrado na imagem, originalmente havia três aviões pequenos, mas agora são dois! ! !
6. Pontos de conhecimento complementares sobre API de arrastar e soltar! ! (Importante, você pode ser questionado durante a entrevista!!)Perguntas da entrevista:
Como exibir uma imagem do cliente (computador) em uma página web?
Como arrastar a página da web do cliente para exibi-la na página baixada do lado do servidor?
O que essas duas perguntas significam?
Normalmente arrastamos e soltamos uma imagem do computador para o navegador para implementar a operação de download! ! ! De acordo com os padrões pré-H5, é impossível arrastar e soltar diretamente uma imagem no navegador para exibição! ! Mas desde que os novos recursos do H5 foram lançados, foi adicionado o recurso de arrastar e soltar API, que realiza perfeitamente essa função! ! !
Ocasiões de aplicação:
Em um determinado site, carregue uma imagem como avatar
Carregar foto...
Novos objetos de operação de arquivo em HTML5:
Arquivo: representa um objeto de arquivo
FileList: Representa um objeto de lista de arquivos, semelhante a um array
FileReader: usado para ler dados de arquivos
FileWriter: usado para gravar dados em arquivos
Funções relacionadas:
div.ondrop = function(e){var f = e.dataTransfer.files[0]; //Encontre o arquivo arrastado e solto var fr = new FileReader(); //Leia o conteúdo do arquivo fr.onload = function(){ //Leitura concluída img.src = fr.result; //Use os dados lidos} }O código é o seguinte:
<span style=font-size: 18px;><!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> #container { border: 1px solid #aaa; raio da borda: 3px; preenchimento: 10px; </style> </head> <body> <h1>Conhecimento avançado da API de arrastar e soltar</h1> <h3>Arraste sua foto para a área da caixa abaixo</h3> <div id=container></ div > <script> //Ouça o evento drop do documento - cancele seu comportamento padrão: abra a imagem em uma nova janela document.ondragover = function(e){ e.preventDefault(); } documento.ondrop = function(e){ e.preventDefault(); //Evita que a imagem abra em uma nova janela, caso contrário a operação de download ainda será realizada! ! ! } //Ouça o evento drop de div#container, tente ler os dados da imagem liberada e exibi-los container.ondragover = function(e){ e.preventDefault() } container.ondrop = function(e){ console; .log ('O cliente arrastou uma imagem e a soltou...') //O objeto de destino atual lê os dados armazenados no objeto de origem arrastar e soltar //console.log(e.dataTransfer); //Exibir um problema //console.log(e.dataTransfer.files.length); //O número de imagens arrastadas em var f0 = e.dataTransfer.files[0]; /File object File //Lê dados do objeto arquivo var fr = new FileReader(); //fr.readAsText(f0); //Ler dados de URL do arquivo fr.onload = function(){ console.log('Leitura do arquivo concluída') console.log(fr.result); ; //dados de URL container.appendChild(img);O efeito é o seguinte:
ResumirO texto acima é uma explicação detalhada dos exemplos clássicos de API de arrastar e soltar HTML5 introduzidos pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. . Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!