Evento ondragstart
Definizione e uso
L'evento ondragstart si verifica quando l'utente inizia a trascinare un elemento o una selezione di testo.
Il trascinamento e il rilascio è una funzione comune in HTML5. È quando si "prende" un oggetto e si trascina in diverse posizioni. Per saperne di più, leggi il nostro corso su Trascinamento HTML5del nostro corso HTML.
Nota:Per rendere un elemento trascinabile, utilizzare il tutorial globale Proprietà draggable HTML5.
Suggerimento:Per impostazione predefinita, i link e le immagini sono trascinabili senza la proprietà draggable.
In diverse fasi dell'operazione di trascinamento e rilascio, vengono utilizzati molti eventi e possono verificarsi:
Eventi scatenati sull'elemento trascinabile (elemento sorgente):
- ondragstart - Si verifica quando l'utente inizia a trascinare l'elemento.
- ondrag - Si verifica quando l'elemento viene trascinato.
- ondragend - Si verifica quando l'utente termina di trascinare l'elemento.
Eventi scatenati sul punto di destinazione:
- ondragenter - Si verifica quando l'elemento trascinato entra nel punto di destinazione.
- ondragover - Si verifica quando l'elemento trascinato si trova sul punto di destinazione.
- ondragleave - Si verifica quando l'elemento trascinato si allontana dal punto di destinazione.
- ondrop - Si verifica quando l'elemento trascinato viene messo sul punto di destinazione.
Esempio
Esegui JavaScript quando l'utente inizia a trascinare l'elemento <p>:
<p draggable="true" ondragstart="myFunction(event)">Trascinami!</p>
Più esempi TIY sono disponibili nella pagina inferiore.
Sintassi
In HTML:
<elemento ondragstart="myScript">
In JavaScript:
oggetto.ondragstart = function(){myScript};
In JavaScript, utilizzare il metodo addEventListener():
oggetto.addEventListener("dragstart", myScript);
Nota:Internet Explorer 8 o versioni precedenti non supportano Il metodo addEventListener().
Dettagli tecnici
| Bubble: | Supportato |
|---|---|
| Cancellabile: | Supportato |
| Tipo di evento: | DragEvent |
| Tag HTML supportati: | Tutti gli elementi HTML |
| Versione DOM: | Eventi di Livello 3 |
Supporto del browser
I numeri nella tabella indicano la versione del browser che supporta completamente l'evento.
| Evento | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragstart | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Più esempi
Esempi di tutti gli eventi di trascinamento e rilascio possibili:
<p draggable="true" id="dragtarget">Trascinami!</p>
<div class="droptarget">Rilascia qui!</div>
<script>
/* ----------------- Gli eventi scatenati sul target di trascinamento ----------------- */
document.addEventListener("dragstart", function(event) {
// Il metodo dataTransfer.setData() imposta il tipo e il valore dei dati trascinabili
event.dataTransfer.setData("Text", event.target.id);
// Visualizza del testo all'inizio del trascinamento dell'elemento p
document.getElementById("demo").innerHTML = "Inizio del trascinamento dell'elemento p.";
// Cambia l'opacità dell'elemento trascinabile
event.target.style.opacity = "0.4";
});
// Cambia il colore del testo durante il trascinamento dell'elemento p
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Dopo aver trascinato l'elemento p, visualizza del testo e reimposta l'opacità
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finito di trascinare l'elemento p.";
event.target.style.opacity = "1";
});
/* ----------------- Eventi scatenati sul punto di destinazione di posizionamento ----------------- */
// Quando l'elemento p trascinabile entra nel droptarget, cambia lo stile del bordo del DIV
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// Per impostazione predefinita, non è possibile posizionare dati/elementi in altri elementi. Per permettere il posizionamento, dobbiamo prevenire il trattamento predefinito dell'elemento
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Quando l'elemento p trascinabile lascia il droptarget, reimposta lo stile del bordo del DIV
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* Al rilascio - prevenire il trattamento predefinito del browser dei dati (apertura predefinita come link al posizionamento) */
Rimetti a zero il colore del testo dell'output e il colore del bordo del DIV
Ottieni i dati trascinati utilizzando il metodo dataTransfer.getData()
I dati trascinati sono l'id dell'elemento trascinato ("drag1")
Aggiungi l'elemento trascinato all'interno dell'elemento di destinazione
*/
document.addEventListener("drop", function(event) {
event.preventDefault();
if ( event.target.className == "droptarget" ) {
document.getElementById("demo").style.color = "";
event.target.style.border = "";
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
});
</script>
