Inleiding
Slepen en neerzetten is een algemene gebruikersinteractie die u in veel grafische gebruikersinterfaces kunt vinden.
Er zijn reeds bestaande JavaScript-bibliotheken om een functie voor slepen en neerzetten aan uw app toe te voegen. Er kunnen echter situaties zijn waarin een bibliotheek niet beschikbaar is of een overhead of afhankelijkheid introduceert die uw project niet nodig heeft. In deze situaties kan kennis van de APIs die voor u beschikbaar zijn in moderne webbrowsers alternatieve oplossingen bieden.
De HTML Drag and Drop API vertrouwt op het gebeurtenismodel van de DOM om informatie te krijgen over wat er wordt gesleept of neergezet en om dat element bij te werken via slepen of neerzetten. Met JavaScript-gebeurtenishandlers kunt u elk element veranderen in een versleepbaar item of een item dat kan worden neergezet.
In deze zelfstudie zullen we een voorbeeld van slepen en neerzetten maken met behulp van HTML slepen en neerzetten API met vanille JavaScript om de gebeurtenishandlers te gebruiken.
Vereisten
Om deze tutorial te voltooien, heb je nodig:
- Een moderne webbrowser die ondersteunt de API voor slepen en neerzetten (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).
Stap 1 – Het project en de eerste opmaak maken
Ons project zal bestaan uit een container met twee soorten onderliggende elementen:
- Onderliggende elementen die u kunt slepen
- Onderliggende elementen waarin elementen kunnen worden neergezet
Open eerst uw terminalvenster en maak een nieuwe projectdirectory:
Navigeer vervolgens naar die directory:
Maak vervolgens een index.html -bestand in die map:
Voeg vervolgens standaardcode toe voor een HTML-webpagina:
En tussen de <body> -tags voegen uw draggable item en uw dropzone (verwijder doel) toe:
Sla het bestand op en sluit het. Maak vervolgens een style.css -bestand:
Voeg vervolgens stijlen toe voor de elementen in onze index.html bestand:
Dit zal wat opmaak aan de app toevoegen. Nu kunt u index.html in de browser bekijken en zien dat dit een draggable <div> oplevert en a dropzone <div>.
Vervolgens zullen we expliciet de eerste <div> versleepbaar maken door het draggable attribuut toe te voegen:
Sla het bestand op en sluit het.
Bekijk ten slotte index.html opnieuw in de browser. Als we op de draggable <div> klikken en deze over het scherm slepen, zou er een visuele indicatie moeten zijn dat deze beweegt.
De standaardwaarde voor het draggable -attribuut is auto. Dat betekent dat of het element versleepbaar is, wordt bepaald door het standaardgedrag van uw browser. Dit betekent doorgaans dat tekstselecties, afbeeldingen en links versleepbaar zijn zonder draggable="true" op te geven.
Je hebt nu een HTML-bestand met een versleepbaar element. We gaan verder met het toevoegen van onevent handlers.
Stap 2 – Afhandeling van gebeurtenissen met slepen en neerzetten met JavaScript
Momenteel, als we laat de muis los terwijl u het versleepbare element sleept, er gebeurt niets. Om een actie op slepen of neerzetten op DOM-elementen te activeren, moeten we de API voor slepen en neerzetten gebruiken:
-
ondragstart: deze gebeurtenishandler wordt aan onsdraggable-element toegevoegd en geactiveerd wanneer eendragstart-gebeurtenis plaatsvindt. -
ondragover: deze gebeurtenishandler wordt aan onsdropzone-element gekoppeld en geactiveerd wanneer eendragover-gebeurtenis plaatsvindt. -
ondrop: deze gebeurtenishandler wordt ook gekoppeld aan onsdropzone-element en wordt geactiveerd wanneer eendropgebeurtenis vindt plaats.
Opmerking: er zijn in totaal acht gebeurtenishandlers: ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, en ondrop. Voor ons voorbeeld hebben we ze niet allemaal nodig.
Laten we eerst verwijzen naar een nieuw https://www.digitalocean.com/community/tutorials/script.js -bestand in ons index.html:
Maak vervolgens een nieuwe https://www.digitalocean.com/community/tutorials/script.js file:
Het DataTransfer -object zal de informatie bijhouden met betrekking tot het huidige slepen. Om ons element bij slepen en neerzetten bij te werken, hebben we rechtstreeks toegang tot het DataTransfer -object nodig.Om dit te doen, kunnen we de eigenschap dataTransfer selecteren uit de DragEvent van het DOM-element.
Opmerking: de DataTransfer object kan technisch informatie bijhouden voor meerdere elementen die tegelijkertijd worden gesleept. Voor ons voorbeeld concentreren we ons op het slepen van één element.
De dataTransfer -object setData -methode kan worden gebruikt om de sleepstatusinformatie in te stellen voor uw momenteel gesleepte element. Er zijn twee parameters voor nodig:
- een tekenreeks die het formaat van de tweede parameter aangeeft
- de feitelijke gegevens die worden overgedragen
Ons doel is om ons draggable -element naar een nieuw bovenliggend element te verplaatsen. We moeten ons draggable -element kunnen selecteren met een uniek id. We kunnen de id van het gesleepte element instellen met de setData -methode, zodat deze later kan worden gebruikt.
Laten we bezoek ons https://www.digitalocean.com/community/tutorials/script.js -bestand opnieuw en maak een nieuwe functie om setData te gebruiken:
Opmerking: Internet Explorer 9 t / m 11 heeft naar verluidt problemen met het gebruik van "text/plain". De indeling moet "text" voor die browser zijn.
Om de CSS-stijl van het gesleepte item bij te werken, hebben we toegang tot de stijlen met de DOM-gebeurtenis opnieuw en door instellen welke stijlen we willen voor de currentTarget.
Laten we toevoegen aan onze functie en de backgroundColor veranderen in yellow:
Opmerking: stijlen die u wijzigt, moeten opnieuw handmatig worden bijgewerkt bij neerzetten als u stijlen met alleen slepen wilt. Als u iets verandert wanneer het begint te slepen, behoudt het gesleepte element die nieuwe stijl, tenzij u het weer wijzigt.
Nu hebben we onze JavaScript-functie voor wanneer het slepen begint.
We kunnen ondragstart toevoegen aan het draggable -element in index.html:
Bekijk index.html in uw browser. Als u nu uw item probeert te slepen, wordt de stijl die in onze functie is opgegeven, toegepast:
Er gebeurt echter niets wanneer u uw klik loslaat.
De volgende gebeurtenishandler die in deze reeks wordt geactiveerd, is ondragover.
Het standaardverloopgedrag voor bepaalde DOM-elementen zoals <div> s in browsers accepteert meestal geen droppen. Dit gedrag onderschept het gedrag dat we proberen te implementeren. Om ervoor te zorgen dat we het gewenste neerzetgedrag krijgen, passen we preventDefault toe.
Laten we het https://www.digitalocean.com/community/tutorials/script.js -bestand opnieuw bekijken en maak een nieuwe functie om preventDefault te gebruiken. Voeg deze code toe aan het einde van het bestand:
Nu, we kunnen ondragover toevoegen aan ons dropzone -element in index.html:
Op dit moment hebben we nog steeds geen code geschreven om het daadwerkelijke droppen af te handelen. De laatste gebeurtenishandler die in deze reeks wordt geactiveerd, is ondrop.
Laten we ons https://www.digitalocean.com/community/tutorials/script.js -bestand opnieuw bezoeken en een nieuwe functie maken .
We kunnen verwijzen naar de gegevens die we eerder hebben opgeslagen met de dataTransfer object setData methode. We gebruiken de dataTransfer object getData methode. De gegevens die we hebben ingesteld waren de id, dus dat wordt naar ons teruggestuurd:
Selecteer ons draggable element met het id dat we hebben opgehaald:
Selecteer onze dropzone element:
Voeg onze draggable -element naar het dropzone:
Reset ons dataTransfer object:
Nu kunnen we ondrop toevoegen aan ons dropzone -element in index.html:
Zodra dat is gebeurd, hebben we een voltooide functie voor slepen en neerzetten. Bekijk index.html in uw browser en sleep het draggable -element naar het dropzone.
Ons voorbeeld behandelt het scenario van een enkel versleepbaar item en een enkel neerzetdoel. U kunt meerdere versleepbare items en meerdere neerzetdoelen hebben en deze aanpassen met alle andere API-gebeurtenishandlers voor slepen en neerzetten.
Stap 3 – Een geavanceerd voorbeeld bouwen met meerdere versleepbare items
Hier is nog een voorbeeld van hoe u deze API zou kunnen gebruiken: een to-do-lijst met versleepbare taken waaruit u kunt verplaatsen een "To-do" kolom naar een "Done" kolom.
Om uw eigen takenlijst te maken, voegt u meer versleepbare elementen toe met unieke id s naar index.html:
Bekijk index.html in uw browser en sleep de items in de takenkolom naar de kolom Gereed. Je hebt een to-do-applicatie gemaakt en de functionaliteit getest.
Conclusie
In dit artikel heb je een to-do-app gemaakt om de functionaliteit voor slepen en neerzetten te verkennen. beschikbaar voor moderne webbrowsers.
De API voor slepen en neerzetten biedt meerdere opties voor het aanpassen van uw acties, naast slepen en neerzetten. U kunt bijvoorbeeld de CSS-stijl van uw gesleepte items bijwerken. In plaats van het item te verplaatsen, kunt u er ook voor kiezen om uw versleepbare item te kopiëren, zodat het bij het neerzetten wordt gerepliceerd.
Houd er rekening mee dat hoewel veel webbrowsers deze technologie ondersteunen, u wellicht niet kunt vertrouwen erop als uw publiek bestaat uit apparaten die deze functionaliteit niet ondersteunen.
Voor meer informatie over alles wat u kunt neerzetten met de API voor slepen en neerzetten, raadpleegt u de documenten van MDN erop.