evento ondrag

Esempio

Esegui un JavaScript quando un <p> elemento viene trascinato:

Più "Try it Yourself" esempi di seguito.

Definizione e l'utilizzo

L'evento ondrag si verifica quando un elemento o selezione di testo viene trascinato.

Drag and drop è una caratteristica molto comune in HTML5. E 'quando si "grab" un oggetto e trascinarlo in una posizione diversa. Per ulteriori informazioni, vedere il nostro Tutorial HTML HTML5 Drag and Drop .

Nota: Per rendere un elemento trascinabile, utilizzare il HTML5 globale trascinabile attributo.

Tip: link e le immagini sono trascinabili per impostazione predefinita e non hanno bisogno del draggable attributo.

Ci sono molti eventi che vengono utilizzati, e può verificarsi, nelle diverse fasi di un'operazione di trascinamento e rilascio:

Eventi sparati sul bersaglio trascinabile (the source element) :
- ondragstart - si verifica quando l'utente inizia a trascinare un elemento
- ondrag - si verifica quando un elemento viene trascinato
- ondragend - si verifica quando l'utente ha terminato il trascinamento dell'elemento

Eventi sparati sulla destinazione di rilascio:
- OnDragEnter - si verifica quando l'elemento trascinato entra nella destinazione di rilascio
- ondragover - si verifica quando l'elemento trascinato è sopra il bersaglio goccia
- ondragleave - si verifica quando l'elemento trascinato lascia la destinazione di rilascio
- OnDrop - si verifica quando l'elemento trascinato è caduto sulla destinazione di rilascio

Nota: mentre si trascina un elemento, l'evento ondrag spara ogni 350 millisecondi.

Supporto browser

I numeri nella tabella indicano la prima versione del browser che supporta pienamente l'evento.

Evento
ondrag	4.0	9.0	3.5	6.0	12.0

Sintassi

In HTML:

< Prova tu stesso "

In JavaScript:

object .ondrag=function(){ Prova tu stesso "

In JavaScript, utilizzando il addEventListener() Metodo:

object .addEventListener("drag", myScript );

Prova tu stesso "

Nota: addEventListener() metodo non è supportato in Internet Explorer 8 e versioni precedenti.

Dettagli tecnici

bolle:	sì
cancelable:	sì
Tipo di evento:	DragEvent
tag HTML supportati:	Tutti gli elementi HTML
DOM Versione:	Livello 3 Eventi

Altri esempi

Esempio

Una dimostrazione di tutti i possibili eventi drag and drop:

<p draggable="true" id="dragtarget">Drag me!</p>

<div class="droptarget">Drop here!</div>

<script>
/* ----------------- Events fired on the drag target ----------------- */

document.addEventListener("dragstart", function(event) {
    // The dataTransfer.setData() method sets the data type and the value of the dragged data
    event.dataTransfer.setData("Text", event.target.id);

    // Output some text when starting to drag the p element
    document.getElementById("demo").innerHTML = "Started to drag the p element.";

    // Change the opacity of the draggable element
    event.target.style.opacity = "0.4";
});

// While dragging the p element, change the color of the output text
document.addEventListener("drag", function(event) {
    document.getElementById("demo").style.color = "red";
});

// Output some text when finished dragging the p element and reset the opacity
document.addEventListener("dragend", function(event) {
    document.getElementById("demo").innerHTML = "Finished dragging the p element.";
    event.target.style.opacity = "1";
});

/* ----------------- Events fired on the drop target ----------------- */

// When the draggable p element enters the droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "3px dotted red";
    }
});

// By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
    event.preventDefault();
});

// When the draggable p element leaves the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "";
    }
});

/* On drop - Prevent the browser default handling of the data (default is open as link on drop)
Reset the color of the output text and DIV's border color
Get the dragged data with the dataTransfer.getData() method
The dragged data is the id of the dragged element ("drag1")
Append the dragged element into the drop element
*/
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>

Prova tu stesso "