Leva 5 minutos para descobrir como arrastar e soltar o HTML5, bem como a ordem de outros eventos de monitoramento e execução.
Definição e usoOs seguintes eventos serão acionados durante o processo de arrastar e soltar:
Acione um evento no destino de arrastar (elemento de origem):
Eventos acionados quando o alvo é liberado:
Internet Explorer 9+, Firefox, Opera, Chrome e Safari suportam arrastar.
Nota: Safari 5.1.2 não suporta arrastar ao arrastar um elemento, o evento ondragover é acionado a cada 350 milissegundos.
Os exemplos são os seguintes:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, escala inicial=1.0> <meta http-equiv=X-UA -Conteúdo compatível=ie=edge> <title>Exemplo conciso de arrastar e soltar em 5 minutos</title> <style> #draggable { largura: 200px altura: 20px; alinhamento de texto: centro; fundo: branco } .dropzone { largura: 200px; fundo: azulvioleta; preenchimento de margem: 10px; .addEventListener(dragstart, function (evento) { console.log('==========dragstart Começar a ser arrastado==========Um arrasto só é executado uma vez'); // Salva a referência do elemento arrastado (ref.) drag = event.target; style.opacity = .5 }, false); /* O evento de arrastar é acionado quando o elemento de destino é arrastado*/ document.addEventListener(drag, function (event) { // console.log('==========arrastar==========Arrastar continuará monitorando até que o elemento seja descartado'); elemento Trigger events */ document.addEventListener(dragover, function (event) { // console.log('==========dragover========== Sempre escutará ao arrastar, Até que o elemento seja eliminado'); // Evita a ação padrão para ativar a eliminação event.preventDefault(); }, false); document.addEventListener(dragenter, function (event) { console.log('==========dragenter arrasta o elemento para o elemento de destino==========corresponde to dragleave '); // Destaca o nó de destino quando o elemento arrastável entra na zona de lançamento if (event.target.className == dropzone) { event.target.style.background = purple } }, false); document.addEventListener(dragleave, function (event) { console.log('==========dragleave arrasta o elemento para longe do elemento de destino===========corresponde a dragenter') ; // Quando o elemento arrastado sai do nó de destino que pode ser solto, redefina seu plano de fundo if (event.target.className == dropzone) { event.target.style.background = } }, false document.addEventListener(drop, function). (evento) { console.log('==========drop drop element==========Um arrasto é executado apenas uma vez, acionado antes do dragenter'); Links para alguns elementos) event.preventDefault(); // Move o elemento arrastado para o nó da zona de lançamento selecionado if (event.target.className == dropzone) { event.target.style.background = ; arrastado); event.target.appendChild(arrastado); =====Um arrasto é executado apenas uma vez'); //Redefinir transparência event.target.style.opacity = }, false </script></head><body> <div class=dropzone> <); div id=arrastável draggable=true ondragstart=event.dataTransfer.setData('text/plain',null)> Este é um DIV que pode ser arrastado </div> </div> <div class=dropzone></div> <div class= zona de lançamento </div> <div class=dropzone></div></body></html>O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.