Dra och släpp JavaScript

Sammanfattning: i den här självstudien lär du dig mer om JavaScript-drag-och-släpp-API.

Inledning till JavaScript Drag and Drop API

HTML5 introducerade formellt drag-and-drop-specifikationen. De flesta moderna webbläsare har implementerat integrerat dra-och-släpp baserat på HTML5-specifikationen.

Som standard kan endast bild och text dras. För att dra en bild håller du helt enkelt ner musknappen och flyttar den sedan. För att dra texten måste du markera lite text och dra den på samma sätt som du skulle dra en bild.

HTML5-specifikationen anger att nästan alla element kan dras. För att göra ett element dragbart lägger du till draggable -egenskapen med värdet true till dess HTML-tagg. Till exempel:

Code language: HTML, XML (xml)

Händelser på dragbara element

När du drar ett element utlöses dessa händelser i följande ordning:

• dragstart
• drag
• dragend

När du håller ner en musknapp och börjar flytta musen avfyras händelsen dragstart på det dragbara elementet som du drar. Markören ändras till en no-drop-symbol (en cirkel med en linje genom den) för att indikera att du inte kan släppa elementet på sig själv.

Efter dragstart händelse avfyras, drag händelsen utlöses upprepade gånger så länge du drar elementet.

Och dragend händelsen avfyras när du slutar dra elementet.

Målet för alla händelser (e.target) är det element som dras.

Som standard ändrar inte webbläsaren utseendet på det dragna elementet. Därför kan du anpassa dess utseende utifrån dina preferenser.

Händelser på släppmål

När du drar ett element över ett giltigt släppmål skjuts dessa händelser i följande ordning:

• dragenter
• dragover
• dragleave eller drop

dragenter händelsen utlöses så snart när du drar elementet över ett släppmål.

Efter dragenter -händelsen utlöses dragover -händelsen upprepade gånger så länge du drar elementet inom släppmålets gräns.

När du drar elementet utanför släppmålets gräns, kommer dragover händelsen slutar skjuta och dragleave händelsen avfyras.

Om du släpper elementet på målet, kommer drop händelse utlöses istället för dragleave händelse.

Målet ( ) av dragenter, dragover, dragleave och drop händelser är droppmålelementen.

Giltigt släppmål

Nästan alla element stöder släppmålhändelserna (dragenter, dragover, dragleave och drop). De tillåter dock inte att tappa som standard.

Om du släpper ett element över ett släppmål som inte tillåter att falla, vann händelsen drop t fire.

För att förvandla ett element till ett giltigt släppmål kan du åsidosätta standardbeteendet för både dragenter och dragover händelser genom att anropa event.preventDefault() -metoden i motsvarande händelsehanterare. (Se exempelavsnittet för mer information)

Överför data med dataTransfer-objekt

För att överföra data i en dra-och-släpp-åtgärd använder du dataTransfer -objekt.

dataTransfer -objektet är en egenskap för händelsen. Det låter dig överföra data från det dragna elementet till släppmålet.

dataTransfer -objektet har två metoder: setData() och getData().

setData() låter dig ställa in dragoperationens data till det angivna formatet och data :

Code language: CSS (css)

Formatet kan vara text/plain eller text/uri-list. Och data kan vara en sträng som representerar de data som ska läggas till i dragobjektet.

Metoden getData() hämtar dragdata som lagrats av setData() -metoden.

getData() accepterar ett argument:

Formatet kan vara text/plain eller text/uri-list. getData() returnerar en sträng som är lagrad med setData() -metoden eller en tom sträng om draoperationen inte innehåller data.

Drag-och-släpp-exempel på JavaScript

Vi utvecklar följande enkla dra-och-släpp-applikation för att visa JavaScript-drag och släpp-API: et:

Skapa projektstruktur

Skapa först en ny mapp som heter drag-n-drop-basics. Inne i den här mappen skapar du två undermappar som heter css och js.

För det andra, skapa en ny fil som heter app.js i js -mappen, style.css i css mapp och index.html i drag-n-drop-basics -mappen.

För det tredje placerar du länken till style.css och skripttagg som länkar till app.js i index.html -filen så här:

Skapa index.html-filen

Placera följande kod i index.html -filen:

I den här index.html-filen, vi använde .container -elementet för att rikta in rubriken och drop-targets -elementet.

Inuti droppmålselementet placerade tre div -element med samma klass box. Och vi placerar ett annat div-element med klassen item i den första rutan.

Om du öppnar index.html och försök att dra den gula rutan så visas markören som indikerar att du inte kan dra:

För att göra elementet dragbart lägger du till draggable egenskapen med värdet true till sin HTML-tagg enligt följande:

Code language: JavaScript (javascript)

Om du sparar index.html öppnar du den i webbläsaren igen ser du att du kan dra objektelementet så här:

Hantera händelser på det dragbara elementet

style.css -filen har .hide klass som döljer ett element:

Code language: CSS (css)

I app.js -filen lägger du till följande kod:

Hur jag t fungerar:

• Välj först det dragbara elementet med querySelector().
• För det andra bifoga en dragstart händelsehanterare till det dragbara elementet.
• För det tredje definierar du funktionen dragStart() för att hantera dragstart händelse.

Om du öppnar filen index.html och börjar dra det dragbara elementet visas meddelandet drag starts... konsolen.

I dragStart händelsehanteraren måste du lagra id för det dragbara elementet. Och du måste dölja det:

Om du drar elementet ser du att det försvinner när du börjar dra.

För att lösa detta använder du setTimeout() -funktion:

Nu kan du dra det dragbara elementet från sin ursprungliga position:

Hantera händelser på släppmål

Style.css-filen har också en CSS-klass som heter .drag-over som förvandlar ramstilen för droppmål till streckad och röd:

Code language: CSS (css)

I app.js behöver du för att välja släppmålelement och hantera dragenter, dragover, dragleave och drop händelser för dessa element:

Randstilen för släppmålet bör ändras när dragenter och dragover händelse inträffar. Det ska återställa stilen när händelsen dragleave och drop inträffar.

För att göra det lägger du till och tar bort drag-over -klassen till drop -målet så här:

Nu, om du drar det dragbara elementet till en annan droppe mål ser du att gränsen för släppmålet ändras som visas på följande bild:

För att göra släppmålet giltigt måste du ringa event.preventDefault() i dragenter och dragover händelsehanterare så här:

Om du inte gör detta kommer händelsen drop aldrig brand eftersom div -elementet inte är ett giltigt släppmål som standard.

Om du drar det dragbara elementet till ett släppmål ser du att markören ändringar som indikerar att du kan släppa elementet:

Om du tappar artikelelementet ser du att det försvinner omedelbart.

För att lösa detta problemet måste du lägga till hantera drop -händelsen.

• Hämta först id för det dragbara elementet med getData() -metoden för dataTransfer -objekt.
• För det andra, lägg till det dragbara elementet som ett underordnat element i släppmålelementet.
• För det tredje, ta bort hide -klass från draggable -elementet.

Följande kod visar hela drop händelsehanterare:

Om du drar och släpper det dragbara elementet nu ska det fungera som förväntat.

Följande visar hela appen app.js:

Och här är länken till demo.

Sammanfattning

• Lägg till draggable -egenskapen med värdet true till ett element för att göra det dragbart.
• dragstart, drag och dragend händelser avfyrar det dragbara elementet.
• dragenter, dragover, eller drop händelser avfyrar släppmålet.
• Ring event.preventDefault() på dragenter och dragover händelsehanterare för att göra ett element till ett giltigt släppmål.
• Använd event.dataTransfer objekt med setData() och getData() metoder för att överföra data i dra-och-släpp-operationen.