So erstellen Sie Drag & Drop -Elemente mit Vanille JavaScript und HTML

HTML und JavaScript können kombiniert werden, um erstaunliche und auffällige Animationen und Effekte auf die Webseite zu erstellen. Es gibt Millionen von Websites im Internet, und Sie möchten nicht, dass Ihre Website inmitten dieser Websites vergessen wird. Einer der einfachsten Effekte, die Sie einem Element auf einer Webseite geben können, ist der Drag & Drop -Effekt. Um sich zu bewegen und einen Artikel an einen beliebigen Punkt auf der Webseite zu platzieren. In diesem Beitrag zeigen wir Ihnen, wie Sie auf der Webseite ein Element dragant und absetzbar machen können.

Draggierbares und abfallenes Element mit HTML und JavaScript

Erstellen Sie ein neues HTML -Element und erstellen Sie im Körper -Tag der HTML -Datei ein neues DIV -Element mit den folgenden Codezeilen:

Ziehen Sie mich und lassen Sie mich fallen

Dadurch wird die folgende Webseite erstellt:

Um dieses Element ein wenig zu stylen, schreiben Sie den folgenden Code außerhalb der Schild:

Wenn Sie diesen Stil ändern, erhalten Sie die folgende Ausgabe auf der Webseite:

Erstellen Sie für den Skriptcode ein neues Skript -Tag , Das JavaScript werden wir in dieses Skript -Tag platziert. Für den JavaScript -Teil werden wir zunächst eine neue erstellen var Dadurch wird später die Referenz des Elements verwendet, um seine Position auf der Webseite zu ändern:

var DragValue;

Als nächstes werden wir eine Funktion namens erstellen Umzug() dass wir das Element verschieben werden. Das erste, was wir in dieser Bewegungsfunktion in dieser Bewegung machen, ist, die Referenz unseres Elements in eine Variable mit der folgenden Codezeile zu erhalten:

var element = document.GetElementById ("Dragelement");

Nicht, dass wir unsere Referenz haben, wir werden die Position dieses Elements auf absolut setzen. Während wir das Element mit unserer Wahl bewegen, möchten wir es genau dort platzieren, wo wir wollen, nicht im Verhältnis zu einem anderen Element:

Element.Stil.Position = "absolut";

Wenn wir auf dieses Element klicken, möchten wir die Referenz unseres Elements an die übergeben "DragValue" Variable, damit wir seine Position manipulieren können:

Element.onmouseDown = function ()
DragValue = Element;
;

Jetzt, da wir die Referenz unseres Elements in der gespeichert haben DragValue Variable, wir werden es jetzt an den Standort der Maus platzieren, indem wir die folgenden Codezeilen verwenden:

dokumentieren.onmousemove = function (e)
var x = e.pagex;
var y = e.Seitey;
DragValue.Stil.links = x + "px";
DragValue.Stil.top = y + "px";
;

Wenn wir die Maustaste loslassen, möchten wir die Referenz unseres Elements aus dem entfernen „DragValue”Variable:

Element.onmouseUp = function ()
DragValue = null;
;

Der letzte Schritt ist, dies aufzurufen Umzug() Funktion mit der folgenden Codezeile:

Umzug();

Der vollständige Skriptcode ist:

Speichern Sie die Datei und führen Sie die HTML aus, und Sie erhalten das folgende Ergebnis in Ihrem Browser:

Und da hast du es; Sie haben ein Drag & Drop -Element in Vanille JavaScript erstellt

Abschluss

Einer der einfachsten Effekte, die Sie mit dem Vanille -JavaScript zusammen mit HTML erstellen können, ist das draggierbare und drogsbare Element auf Ihrer Webseite. In der Mitte von Millionen von Websites möchten Sie, dass Ihre Webseite fällt,. Dafür muss die Webseite super attraktiv und interaktiv sein. Es gibt mehrere Möglichkeiten, einen bestimmten Effekt oder eine bestimmte Animation zu erfüllen. Aber heute haben wir uns darauf konzentriert, etwas Interaktives mit Vanilla JavaScript zu erstellen.