Comentário: Ligue para prevenirDefault () para evitar o processamento padrão de dados do navegador (o comportamento padrão dos eventos de drop é aberto no formulário de link) e os dados arrastados são obtidos através do método DataTransfer.getData (text). Amigos interessados podem se referir a ele.
Efeito original
Efeito após arrastar
O código é o seguinte
[código]
<! Doctype html>
<html>
<head>
<style type = "text/css">
#div1, #div2
{float: esquerda; Largura: 100px; Altura: 35px; margem: 10px; preenchimento: 10px; borda: 1px Solid #AAAAA;}
</style>
<script type = "text/javascript">
Função AllowDrop (EV)
{
ev.preventDefault ();
}
Função arrastar (EV)
{
ev.datatransfer.setData ("text", ev.target.id);
}
Função Drop (EV)
{
ev.preventDefault ();
var dados = ev.datatransfer.getData ("text");
ev.target.appendChild (document.getElementById (dados));
}
</script>
</head>
<Body>
<img src = "/i/w3school_logo_black.gif" draggable = "true" ondragstart = "drag (event)"/>
<div oNDROP = "Drop (Event)" OnDragover = "allowDrop (Event)">
</div>
<div oNDROP = "Drop (Event)" OnDragover = "allowDrop (Event)"> </div>
</body>
</html>
[/código]
Pode parecer um pouco complicado, mas podemos estudar as diferentes partes do evento de arrastar e soltar separadamente.
Defina elementos para arrastar e soltar
Primeiro, para tornar o elemento arrastável, defina a propriedade Draggable como true:
<img draggable = "true" />
O que arrastar - ondragstart e setData ()
Em seguida, especifique o que acontece quando o elemento for arrastado.
No exemplo acima, a propriedade ONDRAGSTART chama uma função, arrastar (evento), que especifica os dados que estão sendo arrastados.
O método datatransfer.setData () define o tipo de dados e o valor dos dados arrastados:
Função arrastar (EV)
{
ev.datatransfer.setData ("text", ev.target.id);
}
Neste exemplo, o tipo de dados é o texto e o valor é o ID do elemento arrastável (drag1).
Onde colocar - OnDragover
O evento OnDragover especifica onde colocar dados arrastados.
Por padrão, dados/elementos não podem ser colocados em outros elementos. Se você precisar definir o posicionamento, devemos bloquear o manuseio padrão dos elementos.
Isso é feito chamando o método Event.PreventDefault () do evento OnDragover:
Event.PreventDefault ()
Faça a colocação - ONDROP
Um evento de gota ocorre quando os dados de queda são colocados.
No exemplo acima, a propriedade ONDROP chama uma função, Drop (Event):
Função Drop (EV)
{
ev.preventDefault ();
var dados = ev.datatransfer.getData ("text");
ev.target.appendChild (document.getElementById (dados));
}
Explicação de código:
Ligue para prevenirDefault () para evitar o processamento padrão de dados do navegador (o comportamento padrão dos eventos de gotas é aberto no formulário de link) para obter os dados arrastados através do método DataTransfer.getData (text). Este método retorna qualquer conjunto de dados para o mesmo tipo no método setData (). Os dados arrastados são o ID do elemento arrastado (drag1) anexa o elemento arrastado ao elemento de colocação (elemento de destino)