One place for hosting & domains

      Wie man einen Parallax Scrolling-Effekt mit Pure CSS in Chrome erstellt.


      Einführung

      Modernes CSS ist ein leistungsstarkes Werkzeug, mit dem Sie viele erweiterte Funktionen der Benutzeroberfläche (UI) erstellen können. In der Vergangenheit waren diese Funktionen auf JavaScript-Bibliotheken angewiesen.

      In diesem Leitfaden werden Sie einige CSS-Zeilen einrichten, um einen scrolling parallax -Effekt auf einer Webseite zu erzeugen. Sie werden Bilder aus placekitten.com als Platzhalter-Hintergrundbilder verwenden.

      Sobald Sie das Tutorial abgeschlossen haben, haben Sie eine Webseite mit einem reinen CSS scrolling parallax-Effekt.

      Warnung: Dieser Artikel verwendet experimentelle CSS-Eigenschaften, die nicht browserübergreifend funktionieren. Dieses Projekt wurde getestet und funktioniert auf Chrome. Diese Technik funktioniert nicht gut in Firefox, Safari und iOS aufgrund der Optimierungen einiger dieser Browser.

      Schritt 1 — Erstellen eines neuen Projekts

      In diesem Schritt verwenden Sie die Befehlszeile, um einen neuen Projektordner und -Dateien einzurichten. Öffnen Sie zunächst Ihr Terminal und erstellen Sie einen neuen Projektordner.

      Geben Sie den folgenden Befehl ein, um den Projektordner zu erstellen.

      In diesem Fall haben Sie den Ordner css-parallax bezeichnet. Wechseln Sie nun in den Ordner css-parallax:

      Erstellen Sie als Nächstes eine index.html -Datei in Ihrem Ordner css-parallax mit dem Befehl nano:

      Sie werden das gesamte HTML für das Projekt in diese Datei einfügen.

      Im nächsten Schritt beginnen Sie, die Struktur der Webseite zu erstellen.

      Schritt 2 — Einrichten der Anwendungsstruktur

      In diesem Schritt fügen Sie das HTML hinzu, das benötigt wird, um die Struktur des Projekts zu erstellen.

      In Ihrer Datei index.html fügen Sie den folgenden Code hinzu.

      css-parallax/index.html

      
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>CSS Scrolling Parallax</title>
        </head>
        <body></body>
      </html>
      

      Dies ist die grundlegende Struktur der meisten Webseiten, die HTML verwenden.

      Fügen Sie den folgenden Code in die <body> Funktion ein:

      css-parallax/index.html

      
      <body>
      ...
         <main>
            <section class="section parallax bg1">
               <h1>Cute Kitten</h1>
            </section>
            <section class="section static">
               <h1>Boring</h1>
            </section>
            <section class="section parallax bg2">
               <h1>Fluffy Kitten</h1>
            </section>
         </main>
      ...
      </body>
      
      

      Dieser Code erstellt drei verschiedene Abschnitte. Zwei werden ein Hintergrundbild haben, und einer wird ein statischer, einfacher Hintergrund sein.

      In den nächsten Schritten fügen Sie die Stile für jeden Abschnitt mit den Klassen hinzu, die Sie in HTML verwenden.

      Schritt 3 — Erstellen einer CSS-Datei und Hinzufügen von Initial-CSS

      In diesem Schritt erstellen Sie eine CSS-Datei. Dann fügen Sie die Initial-CSS hinzu, die benötigt wird, um die Website zu gestalten und den Parallax-Effekt zu erstellen.

      Erstellen Sie als Nächstes eine styles.css -Datei in Ihrem Ordner css-parallax mit dem Befehl nano:

      Hier legen Sie alle CSS an, die für den Parallaxen-Scrolling-Effekt erforderlich sind.

      Als Nächstes beginnen Sie mit der Klasse .wrapper. In Ihrer Datei styles.css fügen Sie den folgenden Code hinzu:

      css-parallax/styles.css

      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        perspective: 2px;
      }
      

      Die Klasse .wrapper legt die Perspektive und die Scroll-Eigenschaften für die gesamte Seite fest.

      Die Höhe des Wrappers muss auf einen festen Wert eingestellt werden, damit der Effekt funktioniert. Sie können die viewport-Einheit vh auf 100 einstellen, um die volle Höhe des Ansichtsfensters des Bildschirms zu erhalten.

      Wenn Sie die Bilder skalieren, fügen Sie dem Bildschirm eine horizontale Bildlaufleiste hinzu, so dass Sie diese deaktivieren können, indem Sie overflow-x: hidden; hinzufügen. Die perspective Eigenschaft simuliert den Abstand vom Viewport zu den Pseudo-Elementen, die Sie im CSS erstellen und weiter transformieren.

      Im nächsten Schritt fügen Sie weitere CSS hinzu, um Ihre Webseite zu gestalten.

      Schritt 4 — Hinzufügen von Stilen für die .section Klasse

      In diesem Schritt fügen Sie Stile der Klasse .section hinzu.

      In Ihrer Datei styles.css fügen Sie den folgenden Code unterhalb der wrapper-Klasse hinzu:

      css-parallax/styles.css

      
      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        perspective: 2px;
      }
      .section { 
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      

      Die Klasse .section definiert die Größe, Anzeige und Texteigenschaften für die Hauptabschnitte.

      Legen Sie eine Position relativ fest, damit das untergeordnete Element .parallax::after absolut bezogen auf das übergeordnete Element .section positioniert werden kann.

      Jeder Abschnitt hat eine Ansicht-Höhe(vh) von 100 ,um die volle Höhe des Ansichtsfensters einzunehmen. Dieser Wert kann geändert und für jeden Abschnitt auf die von Ihnen gewünschte Höhe eingestellt werden.

      Schließlich werden die restlichen CSS-Eigenschaften verwendet, um den Text innerhalb jedes Abschnitts zu formatieren und zu gestalten. Das positioniert den Text in der Mitte jedes Abschnitts und fügt eine Farbe Weiß hinzu.

      Als Nächstes fügen Sie ein Pseudo-Element hinzu und gestalten es so aus, dass der Parallaxen-Effekt in zwei Bereichen in Ihrem HTML erstellt wird.

      Schritt 5 — Hinzufügen von Stilen für die .parallax -Klasse

      In diesem Schritt fügen Sie Stile der .parallax -Klasse hinzu.

      Zuerst fügen Sie ein Pseudo-Element in der zu gestaltenden .parallax -Klasse hinzu.

      Anmerkung: Sie können MDN-Web-Dokumente aufrufen, um mehr über CSS zu erfahren.

      Fügen Sie den folgenden Code unterhalb der .section -Klasse hinzu:

      css-parallax/styles.css

      ...
      
      .section {
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      ...
      

      Die .parallax -Klasse fügt ein ::after -Pseudo-Element dem Hintergrundbild hinzu und liefert die für den Parallaxen-Effekt erforderlichen Transformationen.

      Das Pseudo-Element ist das untergeordnetste Element mit der Klasse des .parallax.

      Die erste Hälfte des Codes zeigt und positioniert das Pseudo-Element. Die transformierende Eigenschaft verschiebt das Pseudo-Element zurück von der Kamera auf dem z-index und skaliert es dann wieder nach oben, um das Ansichtsfenster auszufüllen.

      Da das Pseudo-Element weiter entfernt ist, scheint es sich langsamer zu bewegen.

      Im nächsten Schritt fügen Sie die Hintergrundbilder und den statischen Hintergrundstil hinzu.

      Schritt 6 — Hinzufügen der Bilder und des Hintergrunds für jeden Abschnitt

      In diesem Schritt ergänzen Sie die endgültigen CSS-Eigenschaften, um die Hintergrundbilder und die Hintergrundfarbe des statischen Abschnitts hinzuzufügen.

      Fügen Sie zunächst eine einfarbige Hintergrundfarbe dem .static Abschnitt mit dem folgenden Code nach der Klasse .parallax::after hinzu.

      css-parallax/styles.css

      ...
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      
      .static {
        background: red;
      }
      ...
      

      Die .static Klasse fügt dem statischen Abschnitt, der kein Bild hat, einen Hintergrund hinzu.

      Die beiden Abschnitte mit der .parallax -Klasse haben auch eine zusätzliche Klasse, die für jeden Bereich anders ist. Verwenden Sie die Klassen .bg1 und .bg2, um die Kätzchen-Hintergrundbilder hinzuzufügen.

      Fügen Sie den folgenden Code unterhalb der .static Klasse hinzu:

      css-parallax/styles.css

      ...
      
      .static {
        background: red;
      }
      .bg1::after {
        background-image: url('https://placekitten.com/g/900/700');
      }
      
      .bg2::after {
        background-image: url('https://placekitten.com/g/800/600');
      }
      
      ...
      

      Die .bg1, .bg2-Klassen fügen die jeweiligen Hintergrundbilder für jeden Abschnitt hinzu.

      Die Bilder sind aus der placekitten -Webseite. Es handelt sich um einen Bilderservice von Kätzchen zur Verwendung als Platzhalter.

      Nachdem nun der gesamte Code für den Parallax Scrolling-Effekt hinzugefügt wurde, können Sie Ihre Datei styles.css mit Ihrer index.html verlinken.

      Schritt 7 — Verknüpfen von styles.css und Öffnen von index.html in Ihrem Browser

      In diesem Schritt verknüpfen Sie Ihre Datei styles.css und öffnen das Projekt in Ihrem Browser, um den Parallax Scrolling-Effekt zu sehen.

      Fügen Sie zunächst den folgenden Code dem <head>-Tag in der Datei index.html hinzu.

      css-parallax/index.html

       ...
      <head>
        <meta charset="UTF-8" />
        <^>
        <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/styles.css" />
        <^>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS Parallax</title>
      </head>
      
      ...
      

      Jetzt können Sie Ihre Datei index.html in Ihrem Browser öffnen:

      Scrolling Parallax-Effekt-GIF

      Damit haben Sie eine funktionierende Webseite mit einem Scrolling-Effekt eingerichtet. Sehen Sie sich dieses GitHub-Repository an, um den vollen Code zu sehen.

      Zusammenfassung

      In diesem Artikel haben Sie ein Projekt mit einer index.html und einer Datei styles.css eingerichtet und haben nun eine funktionsfähige Webseite. Sie haben die Struktur Ihrer Webseite hinzugefügt und Stile für die verschiedenen Abschnitte auf der Seite erstellt.

      Es ist möglich, die von Ihnen verwendeten Bilder oder den Parallax-Effekt weiter weg zu legen, damit sie sich langsamer bewegen. Sie müssen die Pixelmenge in den Eigenschaften perspective und transform ändern. Wenn Sie nicht möchten, dass ein Hintergrundbild überhaupt scrollen soll, verwenden Sie background-attachment: fixed; anstelle von perspective/translate/scale.



      Source link

      Wie man den Abfrageparameter in Angular verwendet


      Einführung

      Abfrageparameter in Angular ermöglichen die Übergabe optionaler Parameter über eine beliebige Route in der Anwendung. Abfrageparameter unterscheiden sich von regulären Routenparametern, die nur auf einer Route verfügbar und nicht optional sind (z. B. /product/:id).

      In diesem Artikel verweisen wir auf ein Beispiel für eine Anwendung, die eine Liste von Produkten anzeigt.  Wir bieten optionale Werte für order und price-range an, die von der empfangenden Komponente gelesen und umgesetzt werden können. Die angegebenen Werte wirken sich auf die Reihenfolge und Filterung der Produktliste aus.

      Verwenden der Abfrageparameter mit Router.navigate

      Wenn Sie unbedingt mit Router.navigate zur Route navigieren möchten, übergeben Sie Abfrageparameter mit qeryParams.

      Wenn wir in unserem Beispiel Besucher zu den Produkten mit der nach Beliebtheit geordneten Liste weiterleiten möchten, sieht dies folgendermaßen aus:

      goProducts() {
        this.router.navigate(["https://www.digitalocean.com/products"], { queryParams: { order: 'popular' } });
      }
      

      Dies führt zu einer URL, die wie folgt aussieht:

      http://localhost:4200/products?order=popular
      

      Sie können auch mehrere Abfrageparameter bereitstellen. Wenn wir in unserem Beispiel Besucher zu den Produkten mit der nach Beliebtheit geordneten und nach einer teuren Preisspanne gefilterten Liste weiterleiten möchten, sieht dies folgendermaßen aus:

      goProducts() {
        this.router.navigate(["https://www.digitalocean.com/products"], { queryParams: { order: 'popular', 'price-range': 'not-cheap' } });
      }
      

      Dies führt zu einer URL, die wie folgt aussieht:

      http://localhost:4200/products?order=popular&price-range=not-cheap
      

      Jetzt haben Sie ein Verständnis dafür, wie queryParams verwendet werden können, um Abfrageparameter festzulegen.

      Beibehalten oder Zusammenführen von Abfrageparametern mit queryParamsHandling

      Standardmäßig gehen die Abfrageparameter bei jeder nachfolgenden Navigationsaktion verloren.  Um dies zu verhindern, können Sie queryParamsHandling entweder auf 'preserve' oder 'merge' festlegen.

      Wenn wir in unserem Beispiel die Besucher von einer Seite mit dem Abfrageparameter{ Reihenfolge: „nach Beliebtheit“ } zur Seite /Benutzer unter Beibehaltung der Abfrageparameter weiterleiten, verwenden wir 'preserve' :

      goUsers() {
        this.router.navigate(['/users'], { queryParamsHandling: 'preserve' });
      }
      

      Dies führt zu einer URL, die wie folgt aussieht:

      http://localhost:4200/users?order=popular
      

      Wenn wir in unserem Beispiel die Besucher von einer Seite mit dem Abfrageparameter { Reihenfolge: „nach Beliebtheit“' } zur Seite /Benutzer weiterleiten, während wir den Abfrageparameter { Filter: „neu“ } übergeben, verwenden wir „zusammenführen“:

      goUsers() {
        this.router.navigate(['/users'], { queryParams: { filter: 'new' }, queryParamsHandling: 'merge' });
      }
      

      Dies führt zu einer URL, die wie folgt aussieht:

      http://localhost:4200/users?order=popular&filter=new
      

      Anmerkung: Die Beibehaltung von Abfrageparametern erfolgte früher mit perserveQueryParams, die auf wahr eingestellt waren, aber dies ist nun in Angular 4+ zugunsten von queryParamsHandling veraltet.

      Jetzt haben Sie ein Verständnis dafür, wie queryParamsHandling verwendet werden kann, um Abfrageparameter festzulegen.

      Wenn Sie stattdessen die Anforderung RouterLink verwenden, um zur Route zu navigieren, verwenden Sie queryParams wie folgt:

      <a [routerLink]="["https://www.digitalocean.com/products"]" [queryParams]="{ order: 'popular'}">
        Products
      </a>
      

      Und wenn Sie in unserem Beispiel Abfrageparameter für die nachfolgende Navigation „beibehalten“ oder „zusammenführen“ möchten, verwenden Sie queryParamsHandling wie folgt:

      <a [routerLink]="['/users']"
         [queryParams]="{ filter: 'new' }"
         queryParamsHandling="merge">
        Users
      </a>
      

      Jetzt verstehen Sie, wie queryParams und queryParamsHandling mit RouterLink verwendet werden können.

      Zugriff auf Abfrageparameterwerte

      Nachdem wir nun wissen, wie optionale Abfrageparameter an eine Route übergeben werden, wollen wir sehen, wie auf diese Werte auf den resultierenden Routen zugegriffen werden kann. Die Klasse ActivatedRoute verfügt über eine Eigenschaft queryParams, die eine Beobachtung der Abfrageparameter zurückgibt, die in der aktuellen URL verfügbar sind.

      Angesichts der folgenden Routen-URL:

      http://localhost:4200/products?order=popular
      

      Können wir wie folgt auf den Abfrageparameter Reihenfolge zugreifen:

      // ...
      import { ActivatedRoute } from '@angular/router';
      import 'rxjs/add/operator/filter';
      
      @Component({ ... })
      export class ProductComponent implements OnInit {
        order: string;
        constructor(private route: ActivatedRoute) { }
      
        ngOnInit() {
          this.route.queryParams
            .filter(params => params.order)
            .subscribe(params => {
              console.log(params); // { order: "popular" }
      
              this.order = params.order;
              console.log(this.order); // popular
            }
          );
        }
      }
      

      Im Konsolenprotokoll sehen wir das Objekt params wie folgt:

      Output

      { order: "popular" }

      Und den Wert params.order:

      Output

      popular

      Es gibt auch queryParamMap, der eine Beobachtung mit einem paramMap-Objekt zurückgibt.

      Angesichts der folgenden Routen-URL:

      http://localhost:4200/products?order=popular&filter=new
      

      Können wir wie folgt auf die Abfrageparameter zugreifen:

      this.route.queryParamMap
        .subscribe((params) => {
          this.orderObj = { ...params.keys, ...params };
        }
      );
      

      Wir haben hier den Objektverteilungsoperator verwendet, und dies ist die resultierende Form der Daten in orderObj:

      {
        "0": "order",
        "1": "filter",
        "params": {
          "order": "popular",
          "filter": "new"
        }
      }
      

      Jetzt wissen Sie, wie queryParams und queryParamMap verwendet werden können, um auf die Werte der resultierenden Routen zuzugreifen.

      Zusammenfassung

      In diesem Artikel haben Sie verschiedene Beispiele zum Festlegen und Abrufen von Abfrageparametern in Angular verwendet. Ihnen wurde queryParams und queryParamsHandling mit Router.navigate und RouterLink vorgestellt. Ihnen wurde auch mit ActivatedRoute queryParams und queryParamMap vorgestellt.

      Wenn Sie mehr über Angular erfahren möchten, lesen Sie unsere Seite Angular für Übungen und Programmierprojekte.



      Source link

      Wie man Drag & Drop-Elemente mit Vanilla JavaScript und HTML erstellt


      Einführung

      Drag & Drop ist eine übliche Benutzerinteraktion, die Sie in vielen grafischen Benutzeroberflächen finden.

      Es gibt bereits vorhandene JavaScript-Bibliotheken zum Hinzufügen einer Drag-and-Drop-Funktion zu Ihrer Anwendung. Es kann jedoch Situationen geben, in denen eine Bibliothek nicht verfügbar ist oder einen Overhead oder eine Abhängigkeit mit sich bringt, die Ihr Projekt nicht benötigt.  In diesen Situationen kann die Kenntnis der APIs, die Ihnen in modernen Webbrowsern zur Verfügung stehen, alternative Lösungen bieten.

      Die HTML Drag and Drop-API stützt sich auf das Ereignismodell des DOM, um Informationen darüber zu erhalten, was gezogen oder fallen gelassen wird, und um dieses Element per Drag and Drop zu aktualisieren.  Mit JavaScript-Ereignishandlern können Sie jedes beliebige Element in ein ziehbares Element oder in ein Element, in das abgelegt werden kann, umwandeln.

      In diesem Tutorial werden wir ein Drag-and-Drop-Beispiel mit der HTML-Drag-and-Drop-API mit Vanille-JavaScript erstellen, um die Event-Handler zu verwenden.

      Voraussetzungen

      Um diesem Tutorial zu folgen, benötigen Sie:

      • Einen modernen Webbrowser, der die Drag and Drop API unterstützt (Chrome Firefox 3.5+, Safari 3.1+, Edge 18+).

      Schritt 1 — Erstellen des Projekts und der Ersteinrichtung

      Unser Projekt wird aus einem Container mit zwei Arten von untergeordneten Elementen bestehen:

      • Untergeordnete Elemente, die Sie ziehen können
      • Untergeordnete Elemente, in die Elemente eingefügt werden können

      Öffnen Sie zunächst Ihr Terminalfenster und erstellen Sie ein neues Projektverzeichnis:

      • mkdir drag-and-drop-example

      Navigieren Sie dann zu diesem Verzeichnis:

      Erstellen Sie dann eine index.html - Datei in diesem Verzeichnis:

      Als Nächstes fügen Sie einen Boilerplate-Code für eine HTML-Webseite hinzu:

      index.html

      <!DOCTYPE html>
      <html>
        <head>
          <title>My Drag-and-Drop Example</title>
          <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/style.css" />
        </head>
        <body>
        </body>
      </html>
      

      Und zwischen den Tags <body> fügen Sie Ihr draggable und Ihr dropzone (Ablageziel) hinzu:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Speichern und schließen Sie die Datei. Erstellen Sie dann eine Datei style.css:

      Als nächstes fügen Sie Stile für die Elemente in unserer Datei index.html hinzu:

      style.css

      .example-parent {
        border: 2px solid #DFA612;
        color: black;
        display: flex;
        font-family: sans-serif;
        font-weight: bold;
      }
      
      .example-origin {
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      
      .example-draggable {
        background-color: #4AAE9B;
        font-weight: normal;
        margin-bottom: 10px;
        margin-top: 10px;
        padding: 10px;
      }
      
      .example-dropzone {
        background-color: #6DB65B;
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      

      Dadurch wird der Anwendung etwas Formatierung hinzugefügt. Jetzt können Sie index.html im Browser anzeigen und beobachten, dass dies ein draggable <div> und ein dropzone <div> produziert.

      Screenshot von verschiebbaren und Dropzone-Divs

      Als Nächstes erstellen wir explizit die erste <div> durch Hinzufügen des Attributs draggable .

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Speichern und schließen Sie die Datei.

      Sehen Sie sich schließlich index.html erneut im Browser an.  Wenn wir auf das draggable<<div> klicken und es über den Bildschirm ziehen, sollte es eine visuelle Anzeige der Bewegung geben.

      Der Standardwert für das Attribut draggable ist auto. Das bedeutet, ob das Element ziehbar ist, wird durch das Standardverhalten Ihres Browsers bestimmt.  Typischerweise bedeutet dies, dass Textauswahlen, Bilder und Links gezogen werden können, ohne dass draggable =„wahr" angegeben sein muss.

      Sie haben nun eine HTML-Datei mit einem ziehbaren Element. Wir werden uns mit der Aufnahme von Ereignishandlern befassen.

      Schritt 2 — Handhaben von Drag-and-Drop-Ereignissen mit JavaScript

      Wenn wir jetzt die Maus loslassen, während wir das verschiebbare Element ziehen, geschieht nichts. Um eine Aktion beim Ziehen oder Ablegen von DOM-Elementen auszulösen, müssen wir die Drag & Drop-API verwenden:

      • ondragstart: Dieser Ereignishandler wird an unser ^>draggable<^>Element angehängt und ausgelöst, wenn ein dragstart-Ereignis eintritt.
      • ondragover: Dieser Ereignishandler wird an unser ^>dropzone<^>-Element angehängt und ausgelöst, wenn ein dragover-Ereignis eintritt.
      • ondrop: Dieser Ereignishandler wird an unser dropzone-Element angehängt und ausgelöst, wenn ein drop-Ereignis eintritt.

      Anmerkung: Insgesamt gibt es acht Ereignishandler: ondragondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart und ondrop. Für unser Beispiel benötigen wir sie nicht alle.

      Lassen Sie uns zunächst eine neue Datei script.js in unserer index.html referenzieren:

      index.html

      <body>
        ...
        <script src="https://www.digitalocean.com/community/tutorials/script.js"></script>
      </body>
      

      Erstellen Sie als Nächstes eine neue Datei script.js:

      Das DataTransfer-Objekt verfolgt die Informationen, die sich auf das aktuelle Drag beziehen.  Um unser Element per Drag and Drop zu aktualisieren, müssen wir direkt auf das DataTransfer-Objekt zugreifen. Zu diesem Zweck können wir die Eigenschaft dataTransfer aus dem DragEvent des DOM-Elements auswählen.

      Anmerkung: Das DataTransfer-Objekt kann Informationen für mehrere Elemente verfolgen, die gleichzeitig gezogen werden. Wir werden uns beispielsweise auf das Ziehen eines Elements konzentrieren.

      Die setData-Methode des Objekts dataTransfer kann verwendet werden, um die zu ziehenden Statusinformationen für Ihr aktuell gezogenes Element festzulegen. Dazu sind zwei Parameter erforderlich:

      • Einen String, der das Format des zweiten Parameters deklariert
      • die tatsächlichen übergebenen Daten

      Unser Ziel ist es, unser Element draggable in ein neues übergeordnetes Element zu verschieben. Wir müssen in der Lage sein, unser draggable-Element mit einer eindeutigen ID auszuwählen. Wir können die ID des gezogenen Elements mit der setData-Methode setzen, damit es später verwendet werden kann.

      Schauen wir uns unsere Datei script.js noch einmal an und erstellen eine neue Funktion zur Verwendung von setData:

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      }
      

      Anmerkung: Internet Explorer 9 bis 11 hat laut Angaben Probleme mit der Verwendung von „text/plain“. Das Format muss für diesen Browser „text“ sein.

      Um das CSS-Styling des gezogenen Elements zu aktualisieren, können wir auf seine Stile zugreifen, indem wir erneut das DOM-Ereignis verwenden und die gewünschten Stile für die currentTarget festlegen.

      Ergänzen wir unsere Funktion und ändern die Hintergrundfarbe zu gelb:

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      
        event
          .currentTarget
          .style
          .backgroundColor="yellow";
      }
      

      Anmerkung: Alle Stile, die Sie ändern, müssen beim Ablegen erneut manuell aktualisiert werden, wenn Sie Stile nur zum Ziehen wünschen.  Wenn Sie etwas ändern, sobald das Ziehen beginnt, behält das gezogene Element diese neue Gestaltung bei, es sei denn, Sie ändern es wieder zurück.

      Jetzt haben wir unsere JavaScript-Funktion für den Start des Ziehens.

      Wir können ondragstart dem Element draggable in index.html hinzufügen:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div class="example-dropzone">
          dropzone
        </div>
      </div>
      

      Sehen Sie sich index.html in Ihrem Browser an. Wenn Sie versuchen, Ihren Artikel jetzt zu ziehen, wird das in unserer Funktion deklarierte Styling angewendet:

      Animiertes Gif, das ein Element darstellt, das gezogen, aber nicht fallen gelassen wird

      Es passiert jedoch nichts, wenn Sie Ihren Klick loslassen.

      Der nächste Ereignishandler, der in dieser Reihenfolge ausgelöst wurde, ist ondragover.

      Das Standard-Drop-Verhalten für bestimmte DOM-Elemente wie <div>s in Browsern akzeptiert normalerweise kein Ablegen.  Dieses Verhalten wird das Verhalten abfangen, das wir implementieren möchten. Um sicherzustellen, das wir das gewünschte Ablageverhalten erhalten, wenden wir preventDefault an.

      Sehen wir uns unsere Datei script.js noch einmal an und erstellen eine neue Funktion zur Verwendung von preventDefault. Fügen Sie diesen Code am Ende der Datei hinzu:

      script.js

      function onDragOver(event) {
        event.preventDefault();
      }
      

      Jetzt können wir unserem Element dropzone in index.html ondragover hinzufügen:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
        >
          dropzone
        </div>
      </div>
      

      Zu diesem Zeitpunkt haben wir immer noch keinen Code geschrieben, der das tatsächliche Ablegen behandelt.  Der nächste Ereignishandler, der in dieser Reihenfolge ausgelöst wurde, ist ondrop.

      Lassen Sie uns unsere Datei script.js erneut besuchen und eine neue Funktion erstellen.

      Wir können auf die Daten verweisen, die wir früher mit der setData-Methode des dataTransfer-Objekts gespeichert haben.  Wir werden die getData-Methode des dataTransfer-Objekts verwenden.  Die Daten, die wir gesetzt haben, waren die ID, und das ist es, was uns zurückgegeben wird:

      script.js

      function onDrop(event) {
        const id = event
          .dataTransfer
          .getData('text');
      }
      

      Wählen Sie unser draggable Element mit der von uns abgerufenen ID aus:

      script.js

      function onDrop(event) {
        // ...
      
        const draggableElement = document.getElementById(id);
      }
      

      Wählen Sie unser Element dropzone:

      script.js

      function onDrop(event) {
        // ...
      
        const dropzone = event.target;
      }
      

      Fügen Sie unser Element draggable an das Element dropzone an:

      script.js

      function onDrop(event) {
        // ...
      
        dropzone.appendChild(draggableElement);
      }
      

      Setzen Sie unser dataTransfer-Objekt zurück:

      script.js

      function onDrop(event) {
        // ...
      
        event
          .dataTransfer
          .clearData();
      }
      

      Jetzt können wir unserem Element dropzone in index.html ondrop hinzufügen:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          dropzone
        </div>
      </div>
      

      Sobald das erledigt ist, haben wir eine vollständige Drag-and-Drop-Funktion. Sehen Sie sich index.html in Ihrem Browser an und ziehen Sie das Element draggable zu dropzone.

      Animiertes Gif, das ein Element darstellt, das per Drag & Drop in ein Drop-Ziel gezogen wird

      Unser Beispiel behandelt das Szenario eines einzelnen verschiebbaren Elements und eines einzelnen Ablageziels.  Sie können mehrere verschiebbare Elemente und mehrere Ablageziele haben und sie an alle anderen Drag & Drop-API-Ereignishandler anpassen. 

      Schritt 3 — Erstellen eines erweiterten Beispiels mit mehreren ziehbaren Elementen

      Hier ist ein weiteres Beispiel dafür, wie Sie diese API verwenden können: Eine Aufgabenliste mit ziehbaren Aufgaben, die Sie von einer „zu erledigen"-Spalte in eine Spalte „erledigt" ziehen können.

      Animiertes Gif, das mehrere zu erledigen Aufgaben zeigt, die per Drag & Drop in eine Spalte „erledigt

      Um Ihre eigene zu erledigende Liste zu erstellen, fügen Sie mehr ziehbare Elemente mit einzigartigen IDs zu index.html hinzu:

      index.html

      <div class="example-parent">
        <h1>To-do list</h1>
        <div class="example-origin">
          To-do
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 1
          </div>
          <div
            id="draggable-2"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 2
          </div>
          <div
            id="draggable-3"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 3
          </div>
          <div
            id="draggable-4"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 4
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          Done
        </div>
      </div>
      

      Sehen Sie sich index.html in Ihrem Browser an und ziehen Sie die Elemente in der Spalte zu erledigen zur Spalte erledigt. Sie haben eine zu erledigende Anwendung erstellt und die Funktionalität getestet.

      Zusammenfassung

      In diesem Artikel haben Sie eine zu erledigende Anwendung erstellt, um die Drag-and-Drop-Funktionalität zu untersuchen, die modernen Webbrowsern zur Verfügung steht.

      Die Drag und Drop API bietet mehrere Optionen für die Anpassung Ihrer Aktionen über das Ziehen und Ablegen. Beispielsweise können Sie die CSS-Styling Ihrer verschobenen Elemente aktualisieren. Anstatt das Element zu verschieben, können Sie sich auch dafür entscheiden, Ihr verschiebbares Element zu kopieren, so dass es beim Ablegen repliziert wird.

      Denken Sie daran, dass viele Webbrowser diese Technologie zwar unterstützen, Sie sich womöglich jedoch nicht darauf verlassen können, wenn Ihr Publikum aus Geräten besteht, die diese Funktionalität nicht unterstützen.

      Um mehr darüber zu erfahren, was Sie alles mit der Drag-and-Drop-API ablegen können, lesen Sie die Dokumente von MDN.



      Source link