Inhaltsverzeichnis
Der Effekt ziehen und loslassen Es besteht darin, ein Element der Seite mit einer Mausgeste aufzunehmen, normalerweise indem Sie darauf klicken und dieses Element in einen Bereich ziehen, in dem es abgelegt werden kann, dann wird je nach Funktionalität unserer Seite ein neues Ereignis auftreten oder nicht.In früheren Zeiten wurde dies mit Javascript-Bibliotheken und -Frameworks jQuery-Stil, da HTML-Unterstützung eingeschränkt war, jedoch mit HTML5, wir haben diese Funktionalitäten bereits in unserem Browser integriert.
Erstellen der Elemente zum Ziehen
Im HTML-Dokument müssen wir die Elemente definieren, die diesen Effekt nutzen können, dafür haben wir einige Eigenschaften, die uns dabei helfen.
Beim Platzieren des Attributs ziehbar zu einem Element zeigen wir dem Browser an, dass dieses Element gezogen werden kann oder nicht, dafür hat das Attribut die Werte true, false und auto, wie wir ableiten können, true teilt dem Browser mit, dass es ein Element sein muss, das gezogen wird, andernfalls false, deaktiviert es den Effekt und weist den Browser automatisch an, die Entscheidung zu treffen, ob der Effekt selbst aktiviert werden soll oder nicht.
Eine gute Praxis ist es, true oder false zu verwenden, um explizit anzugeben, ob der Effekt aktiviert ist oder nicht, denn obwohl die meisten Browser den Wert auto als true interpretieren, sollten wir den Verlauf unserer Seite nicht Dritten überlassen.
Effektereignisse ziehen
Bevor wir zum Beispiel übergehen, definieren wir ein weiteres wichtiges Merkmal des Ziehens eines Elements, nämlich dass wir beim Starten des Ziehens eines Elements 3 Ereignisse haben, die wir identifizieren können und mit denen wir verschiedene Verarbeitungen durchführen können, wenn wir wollen , diese Ereignisse sind:
Dragstart, ist der Start des Drag-Ereignisses, wenn die Maus über dem Element platziert, angeklickt und mit dem Ziehen des Elements begonnen wird.
ziehen, es passiert nach Dragstart und dauert die ganze Zeit, in der wir das Element ziehen.
ziehend, tritt in dem Moment auf, in dem wir aufhören, den Gegenstand zu ziehen, egal ob wir ihn im Einzahlungsbereich belassen oder wir bereut haben und auf halbem Weg aufgehört haben, ihn zu ziehen.
Drag-Implementierung
Sehen wir uns unten ein Beispiel an, wie wir alle oben genannten Elemente in eine Seite integrieren. Wir erstellen eine Liste von Elementen, denen wir die zuweisen werden ziehbares Attribut als wahr, werden wir einige CSS-Klassen erstellen, die es uns ermöglichen, ihre Stile zu ändern und schließlich mit den erwähnten Ereignissen, wenn wir ein Element ziehen, wird es seine Farbe ändern.
Sehen wir uns den Code an:
Beispiel
Hier einzahlen
So sieht es nun in unserem Browser aus:
