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

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 utnyttjar funktionerna i detta API.

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 elementet ha ett dragbart HTML-attribut satt till true, 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 om ett element som dras.

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 för att representera den anpassade feedbackbilden och lägg till en dragstart-draghä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 har setDragImage-metoden 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.

Om du vill tillåta en släpp måste du förhindra standardbeteendet genom att avbryta både dragenter- och dragover-händelserna, så här:

 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 ett DragEvent-gränssnitt som representerar en dra-och-släpp-interaktion från användaren. Nedan finns en lista över möjliga händelsetyper under DragEvent-gränssnittet.

  • dra: Användaren aktiverar denna händelse medan han drar ett element.
  • dragend: 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.
  • dragenter: Ett draget element utlöser denna händelse när det går in i ett giltigt släppmål.
  • dragleave: När det dragna elementet lämnar ett släppmål utlöses denna händelse.
  • dragover: När användaren drar ett element som kan dras över ett släppmål, utlöses händelsen.
  • dragstart: Händelsen utlöses i början av en dragoperation.
  • drop: Användaren utlöser denna händelse när de släpper ett element på ett drop-mål.

När du drar en fil till webbläsaren från en miljö utanför webbläsaren (till exempel operativsystemets filhanterare) utlöser inte webbläsaren dragstart- eller dragend-händelserna.

DragEvent kan vara praktiskt om du vill skicka en anpassad draghändelse programmatiskt. Om du till exempel vill att en div ska aktivera anpassade draghändelser vid sidladdning, så gör du så här. Skapa först en ny anpassad DragEvent() så här:

 const customDragStartEvent = new DragEvent('dragstart', {
    dataTransfer: new DataTransfer(),
})

const customDragEndEvent = new DragEvent('dragend');

I kodblocket ovan representerar customDragStartEvent en instans av DragEvent(). I customDragStartEvent finns det två konstruktorargument. Den första representerar draghändelsetypen, som kan vara en av de sju händelsetyperna som nämnts tidigare.

Det andra argumentet är ett objekt med en dataTransfer-nyckel som representerar en instans av DataTransfer, som du kommer att lära dig mer om senare i den här guiden. Ta sedan tag i elementet du vill utlösa händelsen från, från Document Object Model (DOM).

 const draggableElement = document.querySelector("#draggable");

Lägg sedan till händelselyssnarna så här:

   draggableElement.addEventListener('dragstart', (event) => {
    console.log('Drag started!');
    event.dataTransfer.setData('text/plain', 'Hello, world!');
  });

  draggableElement.addEventListener('dragend', () => {
    console.log('Drag ended!');
  });

I den första evenemangslyssnaren ovan loggar återuppringningsfunktionen texten ”Dra började!” och anropar setData-metoden på dataTransfer-egenskapen på händelseobjektet. Nu kan du utlösa de anpassade händelserna så här:

 draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);

Överföra data med dataöverföring

DataTransfer-objektet fungerar som en brygga mellan källelementet (det dragbara objektet) och målelementet (det släppbara området) under en dra-och-släpp-operation. Den fungerar som en tillfällig lagringsbehållare för data som du vill dela mellan dessa element.

Dessa data kan ta olika former, såsom text, webbadresser eller anpassade datatyper, vilket gör det till ett mångsidigt verktyg för att implementera ett brett utbud av dra-och-släpp-funktioner.

Använder setData() för att paketera data

För att överföra data från ett dragbart element till ett släppbart, använder du metoden setData() som tillhandahålls av dataTransfer-objektet. Den här metoden låter dig paketera de data du vill överföra och ange datatypen. Här är ett grundläggande exempel:

 element.addEventListener('dragstart', (event) => {
  event.dataTransfer.setData('text/plain', 'Hello, world!');
});

När en användare börjar dra det angivna elementet paketerar setData() texten ”Hello, world!” med datatypen text/plain. Dessa data är nu associerade med draghändelsen och kan nås av det släppbara målet under släppoperationen.

Hämta data med getData()

På den mottagande sidan, inom ett släppbart elements händelseavlyssnare, kan du hämta överförd data med metoden getData():

 element.addEventListener('drop', (event) => {
  const transferredData = event.dataTransfer.getData('text/plain');
  console.log(`Received data: ${transferredData}`);
});

Kodblocket ovan hämtar data med samma datatyp (text/oformaterad) som ställdes in med metoden setData() tidigare. Detta låter dig komma åt och manipulera överförd data efter behov inom det släppbara elementets kontext.

Användningsfall för dra och släpp-gränssnitt

Att integrera dra-och-släpp-funktionalitet i dina webbapplikationer kan vara en kraftfull förbättring, men det är viktigt att förstå när och varför du bör implementera det.

  • Filuppladdare: Genom att tillåta användare att dra filer direkt från skrivbordet eller filhanteraren till ett angivet släppområde förenklar uppladdningsprocessen.
  • Sorterbara listor: Om din applikation omfattar listor med objekt, såsom uppgiftslistor, spellistor eller bildgallerier, kanske användare uppskattar möjligheten att ändra ordning på objekt genom att dra och släppa.
  • Interaktiva instrumentpaneler: För datavisualisering och rapporteringsverktyg kan dra och släpp vara ett kraftfullt sätt för användare att anpassa sina instrumentpaneler genom att ordna om widgets och diagram.

Hålla tillgängligheten i åtanke

Även om dra och släpp kan vara visuellt tilltalande och förbättra användarupplevelsen, är det avgörande att säkerställa att din implementering förblir tillgänglig för alla användare, inklusive de med funktionshinder. Tillhandahåll alternativa metoder för interaktion, såsom tangentbordskontroller, för att göra din applikation inkluderande.