Tendo chegado ao DRAG e ao DROP pela primeira vez, me deparei com uma descrição muito difícil (esta é a minha opinião subjetiva. Peço que você não concorde com ele, mas que releia tudo o que é possível e olhe para essa pergunta de vários ângulos). E decidi escrever alguns artigos destinados a desenvolvedores iniciantes que desejam aprender Zen.
O artigo consistirá em duas partes:
- Método para criar efeitos DRAG e DROP.
- Aplicação prática do conhecimento adquirido para criar a classificação usando DRAG e DROP
Parágrafo No. 1 Método de criação do efeito DRAG e DROP
Antes de iniciar uma análise profunda, vejamos superficialmente. Imagine-se como um carregador, você precisa mover a caixa de um lugar para outro. Para o carregador, “Bem, peguei, transferi. Pronto! ”E para o programador,“ fui até a caixa, me inclinei, peguei a caixa, peguei a caixa, andei N degraus, me inclinei, soltei a caixa. ”. Quero dizer, antes de começar o trabalho, perca tudo em sua cabeça, em etapas, e você se tornará muito mais próximo da verdade.
Quero fazer uma reserva de que existem vários métodos para criar esse efeito e não deixe de ler sobre todos. Aproveitarei o que atualmente considero o mais conveniente.
Ao criar DRAG e DROP, o primeiro passo é definir o objeto que iremos mover para draggable = 'true'.
<html> <head> <style> .ddd { display:block; float:left; padding:10px; border:1px solid #000; } </style> </head> <body> <div id='d1' class='ddd' draggable='true'>Pervii 1</div> </body> </html>
,
No primeiro estágio, quero mostrar o processo em si e depois espalhá-lo para todos os objetos. No momento, estamos trabalhando em JS e, como você sabe, existem vários eventos no navegador aos quais podemos anexar nossas próprias seqüências de ações. Vejamos os eventos necessários para a criação de DRAG e DROP:
dragstart - ocorre quando o usuário começa a arrastar um item.
arrastar - ocorre quando um item está sendo arrastado.
arrastar - ocorre quando o usuário termina de arrastar o item.
dragenter - ocorre quando o item arrastado atinge o alvo.
dragleave - ocorre quando o item arrastado sai do alvo.
dragover - ocorre quando o item arrastado está acima do destino.
drop - ocorre quando o item que está sendo arrastado cai no alvo.
Agora informações muito importantes! Os eventos são divididos em dois grupos. Para o item movido (aquele que estamos arrastando): arraste, arraste, arraste. Para o elemento de recebimento (onde o arrastamos): Dragenter, Dragleave, Dragover, Drop. E esses eventos não podem funcionar ao contrário, mas podem funcionar um sem o outro.
Por exemplo: Você precisa mover o objeto e deixá-lo onde lançamos o botão do mouse. Esta tarefa não requer uma parte do host.
<html> <head> <style> .ddd { display:block; float:left; padding:10px; border:1px solid #000; } </style> </head> <body> <div id='d1' class='ddd' draggable='true'>Pervii 1</div> <div id='d2' class='ddd'>Vtoroy 2</div> <div id='d3' class='ddd'>Tretii 3</div> <div id='d4' class='ddd'>Chetverty 4</div> <div id='d5' class='ddd'>Pyatii 5</div> <script> var d1 = document.getElementById('d1'); var startCursorX; var startCursorY; var startX; var startY; d1.addEventListener('dragstart',function() { startCursorX = event.pageX;</script> </body> </html>
Sem dúvida, o exemplo é feito no joelho, mas ilustra perfeitamente a opcionalidade do objeto receptor.
Eu considero exemplos com eventos separados para nada, porque se na linha
d1.addEventListener ('dragstart', function () { você substitui 'dragstart' por qualquer outro evento, você pode brincar com ele e obter resultados interessantes. , reproduza e mostre o que lhe pareceu incomum e interessante nos comentários, para que todos aprendam muito e possam repetir por conta própria.
Parágrafo 2. DROP não funciona em DRAG e DROP
Ao tentar todos os eventos, você descobrirá que a queda não funciona. São os desenvolvedores desse método que fazem o atat com aqueles que decidiram "E é isso ... Huh, bobagem".
Bem, tudo é simples, antes do evento drop, você precisa pendurar um evento no mesmo elemento
d2.addEventListener('dragover',function() { event.preventDefault(); });
Tome isso como um fato; não funcionará sem ele.