HTML5 Drag and Drop

Precedente: HTML5 linea SVG

Successivo: HTML5 geopositioning

Drag and drop (trascinamento della selezione) è parte dello standard HTML5.

W3cschool icona e trascinarla al rettangolo.

Drag and Drop

Drag and drop è una caratteristica comune, che è quello di eseguire la scansione su un'altra posizione dopo l'oggetto.

In HTML5, drag and drop è una parte standard di qualsiasi elemento in grado di trascinare e rilasciare.

Supporto per il browser

Internet Explorer 9+, Firefox, Opera, Chrome e Safari supporto drag.

Nota: Safari 5.1.2 non supporta il drag.

HTML5 Drag and Esempi di goccia

L'esempio che segue è un semplice drag and drop Esempio:

Esempi

<!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>

Prova »

Può sembrare un po 'complicato, ma siamo stati in grado di studiare le diverse parti del drag and drop eventi.

Elemento è destinato a ridursi

In primo luogo, al fine di realizzare l'elemento trascinato, impostare l'attributo trascinabile true:

Trascinare cosa - ondragstart e setData ()

Poi, quando l'elemento viene trascinato disposizione, che cosa accadrà.

Nell'esempio precedente, ondragstart attributo chiama una funzione, trascinare (evento), che definisce i dati trascinati.

dataTransfer.setData () per impostare il tipo di dati e il valore di traino dei dati:

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

In questo esempio, il tipo di dati è "Text", il valore è trascinabile elemento id ( "drag1").

Dove mettere - OnDragOver

OnDragOver evento specificato dove collocare i dati trascinati.

Per impostazione predefinita, non è possibile inserire i dati / elementi in altri elementi. Se è necessario impostare consente di posizionare, dobbiamo evitare che la gestione predefinita dell'elemento.

A tale scopo, chiamando OnDragOver event.preventDefault evento () metodo:

event.preventDefault()

Essere collocato - OnDrop

Una volta disposti dati trascinati, goccia si verifica l'evento.

Nell'esempio precedente, OnDrop attributo chiama una funzione, drop (evento):

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

Codice spiegazione:

Chiamare il preventDefault () per impedire che il browser predefinito per l'elaborazione dei dati (il comportamento predefinito di evento di rilascio è quello di aprire un link)
Ottenere dati trascinati attraverso dataTransfer.getData metodo ( "Testo"). Questo metodo restituirà gli stessi set di dati di qualsiasi tipo di metodo setData ().
I dati vengono trainati da traino elemento id ( "drag1")
L'elemento trascinato allegata ad elementi coperti (elemento di destinazione) a

Altri esempi

Trascinare e rilasciare l'immagine avanti e indietro
Come trascinare e rilasciare le immagini tra due elementi <div>.