Att implementera dra-och-släpp-funktionen är enklare än du tror. Lär dig hur i den här användbara guiden.

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 vill bygga en filuppladdning, en sorterbar lista eller ett interaktivt spel, Att förstå hur man utnyttjar funktionerna i detta API är en avgörande färdighet att ha på din webb utvecklingsverktyg.

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 röra sig med en mus, och den andra typen innehåller släppbara element som vanligtvis anger var användare kan placera en 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 dragbarHTML-attribut satt till Sann, så här:

<divdraggable="true">This element is draggablediv>

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.

instagram viewer

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 drastart 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.

Om du vill tillåta ett släpp måste du förhindra standardbeteendet genom att avbryta båda dragenter 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.
  • 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 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.
  • drastart: 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.

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 drastart eller dragend evenemang.

DraEvent kan vara praktiskt om du vill skicka en anpassad draghändelse programmatiskt. Till exempel, om du vill a div för att aktivera anpassade draghändelser vid sidladdning, så här gör du. 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, customDragStartEvent representerar en instans av DragEvent(). I customDragStartEvent, det finns 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 dataöverföring nyckel som representerar en instans av Dataöverföring, 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 händelselyssnaren ovan loggar återuppringningsfunktionen texten "Drag började!" och åberopar setData metod på dataöverföring egendom på händelse objekt. 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

De dataöverföring 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 element använder du setData() metod som tillhandahålls av dataöverföring objekt. 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, setData() paketerar texten "Hej världen!" med datatypen text/vanlig. 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 hjälp av hämta data() metod:

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/vanlig) som ställdes in med hjälp av setData() metod 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, 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 verktyg för datavisualisering och rapportering, 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.