JavaScript slepen en neerzetten

Samenvatting: in deze tutorial leert u over de JavaScript-API voor slepen en neerzetten.

Inleiding naar JavaScript Drag and Drop API

HTML5 introduceerde formeel de drag-and-drop-specificatie. De meeste moderne webbrowsers hebben native drag-and-drop geïmplementeerd op basis van de HTML5-specificatie.

Standaard kunnen alleen afbeeldingen en tekst versleept worden. Om een afbeelding te slepen, houdt u de muisknop ingedrukt en verplaatst u deze. Om de tekst te slepen, moet u wat tekst markeren en deze op dezelfde manier slepen als u een afbeelding zou slepen.

HTML5-specificatie specificeert dat bijna alle elementen versleepbaar kunnen zijn. Om een element versleepbaar te maken, voegt u de eigenschap draggable met de waarde true toe aan de HTML-tag. Bijvoorbeeld:

Code language: HTML, XML (xml)

Gebeurtenissen op versleepbare elementen

Wanneer u een element sleept, worden deze gebeurtenissen in de volgende volgorde geactiveerd:

• dragstart
• drag
• dragend

Wanneer u een muisknop ingedrukt houdt en de muis begint te bewegen, wordt de dragstart -gebeurtenis geactiveerd op het versleepbare element dat je aan het slepen bent. De cursor verandert in een no-drop-symbool (een cirkel met een lijn erdoorheen) om aan te geven dat u het element niet op zichzelf kunt neerzetten.

Na de dragstart gebeurtenis wordt geactiveerd, wordt de gebeurtenis drag herhaaldelijk geactiveerd zolang u het element sleept.

En de gebeurtenis dragend wordt geactiveerd wanneer u stopt met slepen van het element.

Het doel van alle gebeurtenissen (e.target) is het element dat wordt gesleept.

Standaard , verandert de browser het uiterlijk van het gesleepte element niet. Daarom kunt u het uiterlijk aanpassen op basis van uw voorkeuren.

Gebeurtenissen op neerzetdoelen

Wanneer u een element over een geldig neerzetdoel sleept, worden deze gebeurtenissen in de volgende volgorde geactiveerd:

• dragenter
• dragover
• dragleave of drop

De dragenter -gebeurtenis wordt geactiveerd zodra terwijl u het element over een neerzetdoel sleept.

Nadat de dragenter -gebeurtenis wordt geactiveerd, wordt de dragover -gebeurtenis herhaaldelijk geactiveerd zolang u het element binnen de grens van het neerzetdoel sleept.

Wanneer u het element buiten de grens van het neerzetdoel sleept, wordt de dragover gebeurtenis stopt met vuren en de dragleave -gebeurtenis wordt geactiveerd.

In het geval dat u het element op het doel laat vallen, wordt de drop gebeurtenis wordt geactiveerd in plaats van de dragleave gebeurtenis.

Het doel ( ) van de dragenter, dragover, dragleave en drop -gebeurtenissen zijn de drop-target-elementen.

Geldige drop-target

Bijna alle elementen ondersteunen de drop-target-events (dragenter, dragover, dragleave, en drop). Ze staan echter standaard het verwijderen niet toe.

Als je een element neerzet op een neerzetdoel dat niet kan worden neergezet, heeft het drop -evenement gewonnen Niet vuren.

Om van een element een geldig neerzetdoel te maken, kunt u het standaardgedrag van zowel dragenter als dragover events door de event.preventDefault() methode aan te roepen in hun corresponderende event handlers. (Zie de voorbeeldsectie voor meer informatie)

Gegevens overdragen met behulp van dataTransfer-object

Om gegevens over te dragen door middel van slepen en neerzetten, gebruikt u de dataTransfer object.

Het dataTransfer object is een eigenschap van de gebeurtenis. Hiermee kunt u gegevens van het gesleepte element naar het neerzetdoel overbrengen.

Het dataTransfer -object heeft twee methoden: setData() en getData().

Met setData() kunt u de gegevens van de sleepbewerking instellen op de opgegeven indeling en gegevens :

Code language: CSS (css)

Het formaat kan text/plain of text/uri-list zijn. En de gegevens kunnen een tekenreeks zijn die de gegevens vertegenwoordigt die aan het sleepobject moeten worden toegevoegd.

De getData() -methode haalt de sleepgegevens op die zijn opgeslagen door de setData() methode.

De getData() accepteert één argument:

Het formaat kan text/plain of text/uri-list zijn. De getData() retourneert een string die is opgeslagen door de setData() -methode of een lege string als de sleepbewerking geen gegevens bevat.

Voorbeeld van slepen en neerzetten van JavaScript

We zullen de volgende eenvoudige toepassing voor slepen en neerzetten ontwikkelen om de JavaScript-API voor slepen en neerzetten te demonstreren:

Maak de projectstructuur

Maak eerst een nieuwe map met de naam drag-n-drop-basics. Maak in deze map twee submappen met de naam css en js.

Maak vervolgens een nieuw bestand met de naam app.js in de js map, style.css in de css map, en index.html in de drag-n-drop-basics map.

Ten derde, plaats de link naar de style.css en script-tag die als volgt naar de app.js in het index.html -bestand linkt:

Bouw het index.html-bestand

Plaats de volgende code in het index.html -bestand:

In dit index.html-bestand, we gebruikten het .container -element om de kop en het drop-targets -element uit te lijnen.

Binnen het element drop-targets drie div elementen geplaatst met dezelfde klasse box. En we plaatsen nog een div-element met de class item in het eerste vak.

Als je de index.html en probeer het gele vak te slepen, je ziet de cursor die aangeeft dat je niet kunt slepen:

Om het element versleepbaar te maken, voegt u de eigenschap draggable toe met de waarde true naar de HTML-tag als volgt:

Code language: JavaScript (javascript)

Als u de index.html opslaat, opent u deze in de browser nogmaals, u zult zien dat u het itemelement als volgt kunt slepen:

Behandel gebeurtenissen op het versleepbare element

Het style.css -bestand heeft het .hide klasse die een element verbergt:

Code language: CSS (css)

In het app.js bestand voeg je de volgende code toe:

Hoe i t werkt:

• Selecteer eerst het versleepbare element met de querySelector().
• Voeg ten tweede een gebeurtenishandler naar het versleepbare element.
• Ten derde, definieer de dragStart() -functie om de dragstart event.

Als u het bestand index.html opent en het versleepbare element begint te slepen, ziet u het bericht drag starts... in de console.

In de dragStart gebeurtenishandler moet je de id van het versleepbare element opslaan. En je moet het verbergen:

Als je het element sleept, zul je zien dat het verdwijnt zodra je begint met slepen.

Om dit op te lossen, gebruik je de setTimeout() functie:

Nu kunt u het versleepbare element uit zijn oorspronkelijke positie slepen:

Gebeurtenissen afhandelen op neerzetdoelen

Het style.css-bestand heeft ook een CSS-klasse genaamd .drag-over die de randstijl van het neerzetdoel in gestippeld en rood verandert:

Code language: CSS (css)

In de app.js heb je nodig om de neerzetbare doelelementen te selecteren en de dragenter, dragover, dragleave en drop gebeurtenissen van deze elementen:

De randstijl van het neerzetdoel moet veranderen wanneer de dragenter en dragover gebeurtenis vindt plaats. Het zou de stijl moeten herstellen wanneer de dragleave en drop gebeurtenis plaatsvindt.

Om dit te doen, voegt u toe en verwijdert u de drag-over class naar het drop doel als volgt:

Nu, als je het versleepbare element naar een andere drop target, ziet u dat de rand van het neerzetdoel verandert, zoals in de volgende afbeelding wordt weergegeven:

Om het neerzetdoel geldig te maken, moet u event.preventDefault() aanroepen in de dragenter en dragover event handlers zoals deze:

Als je dit niet doet, zal de drop event nooit brand omdat het div -element standaard geen geldig neerzetdoel is.

Als u het versleepbare element naar een neerzetdoel sleept, ziet u dat de cursor wijzigingen die aangeven dat u het element kunt verwijderen:

Als je nu het itemelement laat vallen, zul je zien dat het onmiddellijk verdwijnt.

Om dit op te lossen probleem, moet u handle de drop -gebeurtenis toevoegen.

• Haal eerst de id van het versleepbare element op met de getData() methode van de dataTransfer object.
• Ten tweede, voeg het versleepbare element toe als een onderliggend element van het neerzetdoelelement.
• Verwijder ten derde het hide class uit het draggable element.

De volgende code toont de volledige drop event handler:

Als je het versleepbare element nu sleept en neerzet, zou het moeten werken zoals verwacht.

Het volgende toont het volledige app.js-bestand:

En hier is de link naar de demo.

Samenvatting

• Voeg de draggable eigenschap toe met de waarde true naar een element om het versleepbaar te maken.
• De dragstart, drag en dragend gebeurtenissen worden geactiveerd op het versleepbare element.
• De dragenter, dragover, of drop gebeurtenissen worden geactiveerd op het neerzetdoel.
• Roep de event.preventDefault() op het dragenter en dragover gebeurtenishandlers om van een element een geldig neerzetdoel te maken.
• Gebruik de event.dataTransfer -object met de setData() en getData() methoden om gegevens over te dragen via slepen en neerzetten.