Explicação detalhada da operação nativa de arrastar e soltar HTML5

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.

Ao arrastar o elemento arrastável enquanto mantém pressionado o mouse, ele será acionado na seguinte ordem:

arrastar -> arrastar -> arrastar

1. dragstart: Acionado quando o mouse é pressionado e começa a arrastar (acionado uma vez)
2. arrastar: acionado enquanto mantém pressionado o mouse e arrasta (acionado continuamente)
3. dragend: acionado após soltar o mouse (se o elemento é colocado em um destino de posicionamento válido ou em um destino de posicionamento inválido)

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

Desde 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

Se 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>

O 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>

Se 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.

Có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.