Hur man använder HTML Dra och släpp API

Hur man använder HTML Dra och släpp API
Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

Dra och släpp är en viktig funktion som förbättrar användarinteraktion och underlättar en sömlös användarupplevelse. Oavsett om du funderar på att bygga en filuppladdning, en sorterbar lista eller ett interaktivt spel, är det en avgörande färdighet att ha i din webbutvecklingsverktygssats att förstå hur man kan utnyttja funktionerna i detta API.





Dagens video från MUO SCROLL FÖR ATT FORTSÄTTA MED INNEHÅLL

Grunderna i dra och släpp i HTML

I ett typiskt dra-och-släpp-system finns det två typer av element: den första typen består av dragbara element som användare kan flytta med en mus, och den andra typen inkluderar släppbara element som vanligtvis anger var användare kan placera ett element.



För att implementera dra och släpp måste du tala om för webbläsaren vilka element du vill ska kunna dras. För att göra ett element dragbart av användaren bör det elementet ha en dragbar HTML-attribut satt till Sann , så här:





 <div draggable="true">This element is draggable</div>

När användaren börjar avfyra en draghändelse, tillhandahåller webbläsaren en standard 'spökbild' som vanligtvis ger feedback angående ett element som dras.

hur man hittar gillade videor på youtube
Drag element med bild

Du kan anpassa denna bild genom att tillhandahålla din egen bild istället. För att göra detta, välj det dragbara elementet från DOM, skapa en ny bild som representerar den anpassade feedbackbilden och lägg till en dra start dra händelselyssnare så här:



 let img = new Image(); 
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png'; 
 
document.querySelector('div').addEventListener('dragstart', (event)=>{ 
    event.dataTransfer.setDragImage(img, 10, 10); 
})

I kodblocket ovan visas setDragImage Metoden har tre parametrar. Den första parametern refererar till bilden. De andra parametrarna representerar bildens horisontella respektive vertikala förskjutningar. När du kör koden i webbläsaren och börjar dra ett element kommer du att märka att den anpassade dragbilden har ersatts med den anpassade bilden som ställts in tidigare.

Illustration som visar anpassad dragbild

Om du vill tillåta ett släpp måste du förhindra standardbeteendet genom att avbryta båda mer uthärdligt och Dra över händelser, som detta:



 const dropElement = document.querySelector("drop-target"); 
 
dropElement.addEventListener("dragenter", (ev) => { 
  ev.preventDefault(); 
}); 
 
dropElement.addEventListener("dragover", (ev) => { 
  ev.preventDefault(); 
});

Förstå DragEvent-gränssnittet

JavaScript har en DraEvent gränssnitt som representerar en dra-och-släpp-interaktion från användaren. Nedan finns en lista över möjliga händelsetyper under DraEvent gränssnitt.

  • drag : Användaren aktiverar denna händelse medan han drar ett element.
  • bärande : Denna händelse utlöses när dragoperationen avslutas eller när användaren avbryter den. En typisk dragoperation kan avslutas genom att släppa musknappen eller trycka på escape-tangenten.
  • mer uthärdligt : Ett draget element utlöser denna händelse när det går in i ett giltigt släppmål.
  • dragleave : När det släpade elementet lämnar ett släppmål utlöses denna händelse.
  • Dra över : När användaren drar ett element som kan dras över ett släppmål utlöses händelsen.
  • dra start : Händelsen utlöses i början av en dragoperation.
  • släppa : Användaren utlöser denna händelse när de släpper ett element på ett släppmål.