Explicação detalhada do evento Drag and Drop no HTML5 (arrastar e soltar)

Internet Explorer 9, Firefox, Opera 12, Chrome e Safari 5 Suportam arrastar e soltar.

 <! Javascript> função allowDrop (ev) {ev.preventDefault ();} função arrastar (ev) {ev.datatransfer.setData (text, ev.target.id); Ev.datatransfer.getdata (text); = Drop (Event) OnDragover = allowDrop (Event)> div> <r/> <img id = drag1 src = http: //www.aseoe.com/statics/images /eoe/logo.png draggable = truendragstart = arrasto (Evento)/> </body> </html>

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

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

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 ()

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 ();

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)

O acima é o conteúdo deste artigo.