A função arrastar e soltar do H5 foi usada no desenvolvimento de um projeto recente. Como o projeto existente usa o bucket da família VUE, o plug-in vuedragable é usado, mas todo o processo é bastante doloroso. Então decidi começar a estudar os princípios de arrastar e soltar H5 e depois aplicá-los à estrutura orientada a dados. Para implementar operações de arrastar e soltar no H5, são necessárias pelo menos duas etapas: 1) Definir o atributo draggable do elemento do objeto que você deseja arrastar e soltar como verdadeiro (os elementos img e a permitem arrastar e soltar por padrão 2) Escrita); e arrastando o código de manipulação de eventos relevantes. Para facilitar o teste, primeiro uso a biblioteca jQuery para completar a função básica de arrastar e soltar.
1. Processo de arrastar e soltar 1.1 Evento de arrastarAo arrastar o elemento arrastável enquanto mantém pressionado o mouse, ele será acionado na seguinte ordem:
arrastar -> arrastar -> arrastar
Quando o elemento arrastável for arrastado para o contêiner, ele será acionado na seguinte ordem:
dragenter -> dragover -> soltar
dragenter: Enquanto um elemento for arrastado para o destino de soltar, o evento dragenter será acionado.
dragover: dragenter é seguido pelo evento dragover, e este evento continuará a ser acionado enquanto o elemento arrastado ainda estiver se movendo dentro do intervalo do destino de soltar.
dragleave: quando o elemento é arrastado para fora do destino de posicionamento, dragleave será acionado.
drop: disparado quando o elemento arrastado é colocado no elemento de destino
1.3 Fluxo de eventos completoDesde começar a arrastar o elemento até colocá-lo na área de destino, ele será acionado na seguinte ordem:
arrastar-> arrastar-> dragenter-> arrastar-> arrastar-> soltar-> dragend
2. Resolva o problema de o Firefox não suportar arrastar e soltarSe adicionarmos diretamente o atributo arrastável a um elemento, ele poderá ser arrastado diretamente no Chrome e no Opera (não há operação de liberação (como a seta mudando para um sinal +)), mas não há resposta no Firefox.
<ul class=canDrog> <li draggable=true id=1>Excelente</li> <li draggable=true id=2>Bom</li> <li draggable=true id=3>Médio</li> <li draggable=true id=4>Ruim</li> </ul> <script> //Sem código JS</script>
Para resolver esse problema, você deve vincular o manipulador de eventos dragstart ao elemento drag e chamar a função event.dataTransfer.setData nesta função.
<script> <ul class=canDrog> <li draggable=true id=1>Excelente</li> <li draggable=true id=2>Bom</li> <li draggable=true id=3>Médio</li > <li draggable=true id=4>Diferença</li> </ul> $('.canDrog > li').bind('dragstart',function(event){ //firefox Deve acessar o objeto dataTransfer usado para comunicação de arrastar e soltar event.dataTransfer.setData(Text,'1');</script> 3. Resolva o problema de a marca de liberação não ser exibida ao arrastar elementos para o contêiner no Chrome e OperaO logotipo liberável pode ser diferente dependendo do sistema operacional. No Mac Chrome, ele aparece como um logotipo circular com um “+” branco incorporado.
A solução é vincular o evento dragover ao contêiner
<ul class=canDrog> <li draggable=true id=1>Excelente</li> <li draggable=true id=2>Bom</li> <li draggable=true id=3>Médio</li> <li draggable=true id=4>Diferença</li> </ul> <table class=dataTbl> <thead> <tr> <th style=width: 10%>Seção/semana</th> <th>Segunda-feira</th> <th>Terça-feira</th> <th>Quarta-feira</th> <th>Quinta-feira</th> <th>Sexta-feira</th> </tr> </thead> <tbody > <tr> <td>Seção 1</td> <td draggable=true </td> <td draggable=true </td> <td draggable=true </td> <td draggable= true >< /td> <td draggable=true </td> </tr> <!--Omitido aqui--> </tbody> </table><script> $('.canDrog > li').bind('dragstart',function ( event){ //o firefox deve acessar o objeto dataTransfer usado para comunicação de arrastar e soltar event.dataTransfer.setData(Text,'1' }); Chrome e Opera precisam adicionar $(.dataTbl).bind(dragover,'td',function(e){ e.originalEvent.preventDefault(); }) </script> 4. Resolva o problema do Firefox abrindo uma nova aba ao colocá-loSe você soltar o elemento arrastado ao usar o Firefox, o navegador padrão abrirá uma nova aba, como segue
Isso ocorre porque o navegador executa o comportamento padrão após a função de retorno de chamada drop. A solução usual é adicionar código que impeça a execução do evento padrão e evite bolhas no gancho drop do contêiner de arrastar.
<script> //Libere o elemento no elemento atual $('.dataTbl').bind('drop','td',function(event){ console.log('+++drop'); event.preventDefault (); event.stopPropagation();Porém, se os elementos arrastáveis forem arrastados para outros locais, o problema de abertura de novas abas ainda ocorrerá. Nesse caso, o código acima pode ser adicionado a todos os contêineres.
5. Escreva um pequeno exemplo completoCódigo fonte: https://github.com/pluslicy/drag
Posteriormente, estudaremos a biblioteca de plug-ins vuedraggable e aplicá-la-emos na estrutura vue.
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.