English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
拖放（Drag e drop）是 HTML5 标准的组成部分。
将 oldtoolbag.com 图标拖动到矩形框中。
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
Internet Explorer 9+, Firefox, Opera, Chrome, e Safari支持拖动。
注意:Safari 5.1.2不支持拖动.
下面的示例是一个简单的拖放示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>基础教程(oldtoolbag.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>Trascina l'immagine oldtoolbag.com nel riquadro rettangolare:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/static/images/logo-n.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>Testa a vedere ‹/›Può sembrare un po' complesso, ma possiamo studiare separatamente le diverse parti degli eventi di trascinamento e rilascio.
Prima di tutto, per rendere l'elemento trascinabile, impostare l'attributo draggable su true:
<img draggable="true">
Poi, si determina cosa accade quando l'elemento viene trascinato.
Nell'esempio precedente, l'attributo ondragstart ha chiamato una funzione, drag(event), che determina i dati trascinati.
Il metodo dataTransfer.setData() imposta il tipo di dati e il valore dei dati trascinati:
function drag(ev)
{
ev.dataTransfer.setData("Text", ev.target.id);
}
Text è una DOMString che rappresenta il tipo di dati trascinati da aggiungere all'oggetto drag. Il valore è l'id dell'elemento trascinabile ("drag1").
L'evento ondragover determina dove posare i dati trascinati.
Per default, non è possibile posare dati/elementi su altri elementi. Se si desidera impostare la possibilità di posare, dobbiamo bloccare il modo predefinito di gestione degli elementi.
Questo deve essere fatto chiamando il metodo event.preventDefault() dell'evento ondragover:
event.preventDefault()
Si verifica l'evento drop quando i dati trascinati vengono posati.
Nell'esempio precedente, l'attributo ondrop ha chiamato una funzione, drop(event):
funzione drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
Spiegazione del codice:
Chiamare preventDefault() per evitare il trattamento predefinito dei dati da parte del browser (l'azione predefinita dell'evento drop è aprire i dati come link)
Ottieni i dati trascinati con il metodo getDataTransfer.getData("Text"). Questo metodo restituirà qualsiasi tipo di dati impostato con setData()
I dati trascinati sono l'id dell'elemento trascinato ("drag1")
Aggiungi l'elemento trascinato all'elemento di destinazione (elemento di destinazione)
Trascinamento e rilascio di immagini HTML5
Come trascinare un'immagine tra due elementi <div> .