Drag and drop è una parte dello standard HTML5.
Trascinare l'immagine qui sopra nel rettangolo.
in HTML
La bozza di specifica di lavoro HTML5 include il supporto per il drag & drop. HTML5 supporta diversi tipi di trascinamento della selezione funzioni, tra cui:
- testi drag and drop e codici HTML
- Trascinare gli elementi HTML
- file Drag Drop e
Sulla base di azioni necessarie, uno dei tipi di cui sopra può essere utilizzato. Si noti che quando un elemento HTML viene trascinato per spostare la sua posizione attuale, il suo ID viene inviato all'elemento genitore destinazione; quindi invia un testo e può essere considerato come il primo gruppo.
applicazione di posta elettronica web-based di Google Gmail supporta il drag-and-drop di immagini e allegati nel più recente del browser Google Chrome e Apple Safari (5.x). E di ricerca immagini di Google supporta il drag & drop.
Trascinare e rilasciare
Drag and drop è una caratteristica molto comune. E 'quando si "grab" un oggetto e trascinarlo in una posizione diversa.
In HTML5, trascinamento è parte dello standard e ogni elemento può essere trascinato.
Supporto browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente Drag and Drop.
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Trascinare HTML and Drop Esempio
L'esempio che segue è una semplice operazione di trascinamento esempio:
Esempio
<!DOCTYPE HTML>
<html>
<head>
<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>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html> Prova tu stesso " Potrebbe sembrare complicato, ma lascia passare attraverso tutte le diverse parti di un evento di drag and drop.
Fai un elemento Draggable
Prima di tutto: Per rendere un elemento trascinabile, impostare l' draggable attributo su true :
<img draggable="true">
Cosa trascinare - ondragstart e setData()
Quindi, specificare cosa dovrebbe accadere quando l'elemento viene trascinato.
Nell'esempio precedente, il ondragstart attributo chiama una funzione, drag(event) , che specifica quali dati per essere trascinati.
Il dataTransfer. setData() dataTransfer. setData() metodo imposta il tipo di dati e il valore dei dati trascinato:
function drag(ev) {
ev.dataTransfer. setData("text", ev.target.id) ;
}
In questo caso, il tipo di dati è "text" e il valore è l'id dell'elemento trascinabile ("drag1") .
Dove Drop - ondragover
Il ondragover manifestazione specifica dove i dati trascinati può essere eliminato.
Per impostazione predefinita, i dati / gli elementi non possono essere lasciati in altri elementi. Per consentire una goccia, dobbiamo evitare che la gestione predefinita dell'elemento.
Questo viene fatto chiamando la event. preventDefault() event. preventDefault() metodo per l' ondragover evento:
event . preventDefault()
Fare la goccia - OnDrop
Quando i dati trascinato viene eliminato, si verifica un evento di rilascio.
Nell'esempio precedente, il ondrop attributo chiama una funzione, drop(event) :
function drop(ev) {
ev. preventDefault() ;
var data = ev.dataTransfer. getData("text") ;
ev.target. appendChild(document.getElementById(data) );
}
Codice ha spiegato:
- Chiamare preventDefault() per evitare che la gestione del browser di default dei dati (default is open as link on drop)
- Ottenere i dati trascinati con il dataTransfer. getData() dataTransfer. getData() metodo. Questo metodo restituirà eventuali dati impostati allo stesso tipo in setData() metodo
- I dati trascinato è l'id dell'elemento trascinato ("drag1")
- Aggiungere l'elemento trascinato nella drop dell'elemento
Immagine di trascinamento avanti e indietro
Come trascinare (and drop) indietro un'immagine e indietro tra due <div> elementi.