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.
O Internet Explorer 9+, Firefox, Opera, Chrome e Safari suportam arrastar.
Nota: O Safari 5.1.2 não suporta arrasto.Exemplo:
<! Estilo> <Script> função alowdrop (ev) {ev.preventDefault ();} função draw (ev) {ev.datatransfer.setData (text, evRaget.id);} função op (ev) {evDefault (); var dados = ev.datatransfer.getdata (text); = Drag1 src = img /bg_1.jpg draggable = true ondragstart = drag (event) largura = 300px heig ht = 180px /> </body> < /html>Primeiro de tudo, para fazer o elemento ser arrastado, defina a propriedade Draggable como true: <img draggable = 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 ();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)
Arraste para frente e para trás:Se você deseja arrastar para frente e para trás em dois lugares, basta modificar o código acima.
Altere o código no corpo:
<body> <div id = div1 ondrop = gota (evento) ondragover = allowDrop (event)> <img id = drag1 src = img/bg_1.jpg draggable = true Vent) largura = 300px altura = 180px/> </div) <div id = div2 ondrop = gota (event) onDragover = allowDrop (evento)> </div> </body>
Em seguida, adicione#div2 ao estilo de estilo:
<Tipo de estilo = text/css> #div1, #div2 {width: 360px;Isso pode ser arrastado para frente e para trás.
O acima é todo o conteúdo deste artigo.