HTML5 Drag and Drop

Anterior: HTML5 em linha SVG

Seguinte: geopositioning HTML5

Drag and drop (arrastar e soltar) é parte do padrão HTML5.

W3cschool ícone e arraste-o para o retângulo.

Drag and Drop

Arrastar e soltar é uma característica comum, que é a rastejar para outro local depois do objeto.

Em HTML5, arrastar e soltar é uma parte padrão de qualquer elemento pode arrastar e soltar.

Suporte a navegadores

Internet Explorer 9 +, Firefox, Opera, Chrome e Safari suporte a arrastar.

Nota: Safari 5.1.2 não suporta o arrasto.

HTML5 Drag and Drop-Exemplos

O exemplo a seguir é um simples arrastar e soltar Exemplo:

Exemplos

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
    ev.preventDefault();
}

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>拖动 W3CSchool.cc 图片到矩形框中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

tente »

Pode parecer um pouco complicado, mas fomos capazes de estudar diferentes partes do arrastar e soltar eventos.

Elemento está definido para cair

Em primeiro lugar, a fim de fazer o elemento arrastável, definir o atributo arrastável a verdadeira:

Arraste Que - ondragstart e setData ()

Então, quando o elemento é arrastado disposição, o que vai acontecer.

No exemplo acima, ondragstart atributo chama uma função, arraste (evento), que define os dados que estão sendo arrastados.

dataTransfer.setData () para definir o tipo de dados e valor rebocado dados:

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

Neste exemplo, o tipo de dados é "Texto", é o valor de ID de elemento arrastável ( "drag1").

Onde colocar - ondragover

ondragover evento especificado onde colocar os dados sendo arrastados.

Por padrão, você não pode colocar os dados / elementos em outros elementos. Se você precisa configurar permite que você coloque, devemos evitar a manipulação padrão do elemento.

Fazer isso chamando ondragover método event.preventDefault evento ():

event.preventDefault()

Ser colocado - ondrop

Quando colocado dados arrastados, gota evento ocorre.

No exemplo acima, ondrop atributo chama uma função, drop (evento):

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

explicação código:

Chamar o preventDefault () para impedir que o navegador padrão para processamento de dados (comportamento padrão do evento queda é abrir um link)
Obter dados arrastados através dataTransfer.getData ( "Text") método. Este método irá retornar os mesmos dados ajustados de qualquer tipo no método setData ().
Os dados são rebocados rebocado elemento id ( "drag1")
O elemento arrastado anexado ao colocar elementos (elemento de destino) em

mais exemplos

Arrastar e soltar a imagem e para trás
Como arrastar e soltar imagens entre dois elementos <div>.