ondrag-händelse

DOM-händelser DragEvent

Definition och användning

ondrag-event inträffar när ett element eller textval snappas upp och dras.

Drag-och-släpp är en mycket vanlig funktion i HTML5. Det innebär att när du "fångar" ett objekt och drar det till en annan plats. För att lära dig mer, läs vår HTML5-drag och släppHTML-tutorials.

Kommentar:För att göra ett element dragningsbart, använd global HTML5 draggable-egenskapen.

Tips:Som standard är länkar och bilder dragningsbara utan att behöva draggable-egenskapen.

Under olika faser av drag-och-släpp-operationer används många evenemang och kan inträffa:

Evenemang som utlöses på källan (käll-elementet):

  • ondragstart - När användaren börjar dra elementet
  • ondrag - När elementet dras
  • ondragend - När användaren släpper det dragade elementet

Evenemang som utlöses på målet:

  • ondragenter - När det dragade elementet kommer in i målet
  • ondragover - När det dragade elementet finns på målet
  • ondragleave - När det dragade elementet lämnar målet
  • ondrop - När det dragade elementet placeras på målet

Kommentar:När elementet dragas, utlöses ondrag-eventen varje 350 millisekund.

Exempel

Kör JavaScript när <p>-elementet dragas:

<p draggable="true" ondrag="myFunction(event)">Drag mig!</p>

Prova själv

Det finns fler TIY-exempel längre ner på sidan.

Syntax

I HTML:

<element ondrag="myScript">

Prova själv

I JavaScript:

object.ondrag = function(){myScript};

Prova själv

I JavaScript, använda addEventListener() metoden:

object.addEventListener("drag", myScript);

Prova själv

Kommentar:Internet Explorer 8 eller tidigare versioner stöder inte addEventListener() metoden.

Tekniska detaljer

Bubbling: Stödjer
Kan annulleras: Stödjer
HändelseTyp: DragEvent
HTML-taggar som stöds: Alla HTML-element
DOM-version: Nivå 3-händelser

Webbläsarstöd

Tal i tabellen anger den första webbläsarens version som helt stöder denna händelse.

händelse Chrome IE Firefox Safari Opera
ondrag 4.0 9.0 3.5 6.0 12.0

Mer exempel

Demonstration av alla möjliga drag-och-släpp-händelser:

<p draggable="true" id="dragtarget">Dra mig!</p>
<div class="droptarget">Släpp här!</div>
<script>
/* ----------------- Händelser som utlösas på dragmålet ----------------- */
document.addEventListener("dragstart", function(event) {
  // dataTransfer.setData() metoden sätter datatypen och värdet för det dragbara data
  event.dataTransfer.setData("Text", event.target.id);
  // Skriv ut några texter när p-elementet börjar dras
  document.getElementById("demo").innerHTML = "Börjat dra p-elementet.";
  // Ändra genomskinligheten för den dragbara elementet
  event.target.style.opacity = "0.4";
});
// Ändra färgen på utdata när p-elementet dras
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// Efter att ha släppt p-elementet, skriv ut några texter och återställ genomskinligheten
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "Avslutad att dra p elementet.";
  event.target.style.opacity = "1";
});
/* ----------------- Händelser som utlöses på måltarget ----------------- */
// När ett draggable p-element kommer in i droptarget, ändra kantstilen för DIV
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// Som standard kan data inte läggas på andra element. För att tillåta placering måste vi förhindra elementets standardhantering
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// När en draggable p-element lämnar droptarget, återställ kantstilen för DIV
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* När data släpps - förhindra standardhanteringen av webbläsaren för data (öppna länkar vid standardplacering)
Återställ färgen på utdata-texten och DIV:s kantfärg
Hämta dragdata med hjälp av metoden dataTransfer.getData()
De data som dragas är id:t för det dragade elementet ("drag1")
Lägg till det flyttade elementet i målelementet
*/
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 själv

Relaterade sidor

HTML-lärningsguide:HTML5-drag och släpp

HTML-referenshandbok:HTML draggable-attribut

DOM-händelser DragEvent