Página Inicial>Tutorial de web design>Tutorial HTML

Explicação detalhada e código de instância do HTML5

Autor：Eve Cole Data da Última Atualização：2025-02-04 12:24:01
Breve introdução

Arrastar e soltar é um recurso comum, ou seja, arraste para outra posição após o objeto de captura.

No HTML5, arrastar e soltar é uma peça padrão e qualquer elemento pode ser arrastado e soltado.

Clique primeiro em um pequeno exemplo: execute javascript quando o usuário começa a arrastar elementos <p>

 <P Draggable = True OnDragStart = MyFunction (Evento)> Drague -me!

Dica: os links e as imagens são arrastados por padrão e não precisam de propriedade draggable.

Definição e uso

Os seguintes eventos serão acionados durante o processo de arrastar e soltar:

  • Acionar o evento (elemento de origem): ONDRAGSTART -USER -Quando o usuário começa a arrastar o elemento
    • ONDRAG -Element é acionado ao arrastar
    • ONDRAGEND -User Conclusão Elemento Drago Trigger
  • Evento desencadeado ao liberar o alvo: OnDragenter -Quando o objeto arrastado pelo mouse entra no contêiner, ele desencadeia este evento
    • ONDRAGOVER -Quando um objeto arrastado é arrastado dentro da faixa de outro contêiner de objeto, ele desencadeia este incidente
    • Ondragleave -Trigger este incidente quando o objeto arrastado pelo mouse deixa o contêiner
    • ONDROP -Durante um arrasto, ele desencadeia este evento quando libera a tecla do mouse
Suporte do navegador

O Internet Explorer 9+, Firefox, Opera, Chrome e Safari suportam arrastar.

NOTA: O Safari 5.1.2 não suporta arrasto;

Exemplo

Publique o código primeiro e depois explique um por um:

 <! Border: 1px Solid #AAAAAA;} </SYLEY> </head> <body> <p> arrastando img_w3slogo.gif imagem para a caixa retangular: </p> <div id = div1 ondrop = gota (evento) ondragover = allowDrop (Mesmo t)> </div> <br> <img id = drag1 src = imagens/img_w3slogo. Ev.PreventDefalt ();} função arrastar (ev) {ev.datatransfer.setData (text, ev.target.id);} função gota (ev) {ev.preventdefault (); ;

O efeito da página antes de arrastar é:

Vamos analisar o significado do código a seguir abaixo.

Defina o elemento pode ser arrastado e soltado

Primeiro de tudo, para fazer o elemento ser arrastado, defina a propriedade Draggable como True:

 <Img draggable = true>
O que arrastar-se e seta e setData ()

É especificado o que acontece quando o elemento é arrastado.

No exemplo acima, a propriedade ONDRAGSTART chama uma função, arrastar (evento), que especifica os dados arrastados.

DataTransfer.SetData () Método Defina o tipo de dados e o valor dos dados de arrastar dados:

 Função drag (ev) {ev.datatransfer.setData (text, ev.target.id);}

Neste exemplo, o tipo de dados é o texto e o valor é ID (drag1) que pode arrastar o elemento.

Onde colocá-lo-ondragover

O evento OnDragover estipula onde colocar os dados arrastados.

Padrão, dados/elementos não podem ser colocados em outros elementos. Se você precisar definir o posicionamento permitido, devemos impedir o processamento padrão dos elementos.

Isso é para ligar para o método Event.PreventDefault () do evento OnDragover: :):

 Event.PreventDefault ()
Colocando-Androp

Quando os dados de arrastar são colocados, o evento de queda ocorre.

No exemplo acima, o atributo ONDROP chama uma função, Drop (Evento):

 Função Drop (EV) {EV.PreventDefault ();

Explicação de código:

  • Ligue para o PreventDefault () para evitar o processamento padrão do navegador dos dados (o comportamento padrão do evento Drop é aberto em um link)
  • Obtenha os dados arrastados através do método DataTransfer.getData (texto). Este método retornará a quaisquer dados do mesmo tipo no método setData ().
  • Os dados de arrasto são o ID do elemento de arrasto (drag1)
  • Elemento de arrasto adicional para o elemento de colocação (elemento de destino)

Os resultados da implementação são os mostrados na figura:

Objeto Datatransfer

Durante a operação de arrasto, podemos usar o objeto Datatransfer para transmitir os dados para executar outras operações nos dados quando a operação de arrasto terminar.

Atributo de objeto:

  • Dropeffect: defina ou retorne o comportamento de arrastar e soltar que ocorre no alvo de arrasto e soltar. Se o comportamento de arrastar e soltar definido aqui não mais dentro das várias configurações de comportamento de arrasto e soltar definidas pelas configurações de atributos do EffectLowed, a operação de arrastar e soltar falhará. Esse valor de atributo é apenas um dos quatro valores de nulo, copiar, link e mover.
  • EFEITOLLOWED: defina ou retorne o comportamento de arrasto que o elemento de arrasto permitiu. Esse valor de atributo pode ser definido como nenhum, copiar, copylink, copymove, link, linkMove, mover, tudo e não -inicializado.
  • Itens: Este atributo retorna o objeto Datatransferitems, que representa os dados de arrasto.
  • Tipos: Este atributo retorna um objeto DomStringList, que inclui todos os tipos de dados armazenados em dados no DataTransfer.
Método do objeto:

  • SetData (formato, dados): Atribua os dados no formato especificado ao objeto Datatransfer.
  • GetData (formato): Obtenha os dados no formato especificado do objeto DataTransfer, o formato representa o formato de dados, os dados são dados.
  • ClearData ([formato]): exclua os dados do formato especificado do objeto Datatransfer.
  • AddElement (elemento): adicione ícone personalizado
  • SetDragImage (elemento, x, y): defina o ícone personalizado da operação de arrastar e soltar. Entre eles, o elemento define um ícone personalizado, X define a distância entre o ícone e o mouse na direção horizontal e a distância entre o ícone e o mouse na direção vertical.
Identifique o que é drawgable

 Função dragstart_handler (ev) {console.log (dragstart); = p1 draggable = true ondragstart = dragstart_handler (evento);> esse elemento é drawgable
Defina os dados do arrasto

 Função dragstart_handler (ev) {// Adicione o drag data ev.datatransfer.setdata (text/plain, ev.target.id); ;
Defina a imagem de arrasto

 Função Dragstart_handler (EV) {// Crie uma imagem e use -a para a imagem de arrasto. ();
Defina o efeito de arrasto

 Função dragstart_handler (ev) {// Defina o efeito de arrasto para copiar ev.datatransfer.dropeffft = copy;}
Defina uma zona de gota

 Função dragover_handler (ev) {ev.preventDefault (); Elemento para os dados domina do destino = ev.datatransfer.getdata (text); Div> </body>
Problema de arrastamento do navegador Firefox

Mas vá aqui e encontre um problema no navegador Firefox:

O arrasto do HTML5 usa o PreventDefault para impedir que a página pop -up apareça, mas não funciona sob o Firefox?

Solução:

 document.body.ondrop = function (event) {event.preventDefault ();

Ou para o exemplo acima, também é possível adicionar ao método OnDrop:

 Função Drop (EV) {EV.PreventDefault ();

O acima é todo o conteúdo deste artigo.

Artigos Relacionados