Hvordan lage dra og slippe elementer med Vanilla JavaScript og HTML

HTML og JavaScript kan kombineres for å skape fantastiske og iøynefallende animasjoner og effekter på websiden. Det er millioner av nettsteder tilgjengelig på internett, og du vil ikke at nettstedet ditt skal glemmes midt i disse nettstedene. En av de enkleste effektene du kan gi til et element på en webside er drag- og slippeffekten. Å flytte og plassere et element til et hvilket som helst punkt på nettsiden. I dette innlegget skal vi vise deg hvordan du kan lage et element som er draggbart og droppbart på websiden.

Dragbart og droppbart element med HTML og JavaScript

Lag et nytt HTML -element og inne i HTML -filens kroppskode, lag et nytt DIV -element med følgende kodelinjer:

Dra og slipp meg

Dette vil opprette følgende webside:

For å style dette elementet litt, skriv følgende kode utenfor stikkord:

Ved å endre denne stilen får du følgende utdata på websiden:

For skriptkoden, oppretter du en ny Skriptkode , Javascriptet vil vi bli plassert inne i dette skriptetoden. For JavaScript -delen skal vi først opprette en ny var Det vil senere bruke referansen til elementet for å endre sin posisjon på nettsiden:

var dragvalue;

Deretter skal vi lage en funksjon som heter bevege seg() som vi vil bruke for å flytte elementet. Det første vi skal gjøre innenfor denne bevegelsesfunksjonen er å få referansen til elementet vårt i en variabel med følgende kodelinje:

var element = dokument.getElementById ("DragElement");

Ikke at vi har vår referanse, vi kommer til å sette posisjonen til dette elementet til Absolute. Når vi beveger elementet med vårt valg, vil vi plassere det akkurat der vi vil, ikke i forhold til et annet element:

element.stil.posisjon = "absolutt";

Når vi klikker på dette elementet, ønsker vi å gi referansen til vårt element til “Dragvalue” variabel slik at vi kan manipulere dens posisjon:

element.onmousedown = funksjon ()
dragvalue = element;
;

Nå, at vi har referansen til vårt element lagret i dragvalue Variabel, vi skal nå plassere den på musens beliggenhet ved å bruke følgende kodelinjer:

dokument.onMousemove = funksjon (e)
var x = e.sidex;
var y = e.sidey;
dragvalue.stil.venstre = x + "px";
dragvalue.stil.topp = y + "px";
;

Når vi slipper museknappen, ønsker vi å fjerne referansen til elementet vårt fra “Dragvalue”Variabel:

element.onmouseup = funksjon ()
dragvalue = null;
;

Det siste trinnet er å påkalle dette bevege seg() Funksjon med følgende kodelinje:

bevege seg();

Den komplette skriptkoden vil være:

Lagre filen og utfør HTML, så får du følgende resultat på nettleseren din:

Og der har du det; Du har gjort et dra- og slippelement i Vanilla JavaScript

Konklusjon

En av de enkleste effektene du kan lage ved hjelp av Vanilla JavaScript sammen med HTML er det draggbare og droppbare elementet på websiden din. Blant midt på millioner av nettsteder, vil du at hjemmesiden din skal skille seg ut. For det må websiden være supertraktiv og interaktiv. Det er flere måter å gjøre en bestemt effekt eller animasjon takket være de stadig økende mengdene av JavaScript-biblioteker. Men i dag fokuserte vi på å lage noe interaktivt ved hjelp av Vanilla JavaScript.