Die M?glichkeit, einer Webseite Drag & Drop -Funktionen hinzuzufügen, besteht darin, die Drag & Drop -API von HTML5 zu verwenden, die ohne zus?tzliche Bibliotheken nativ unterstützt wird. Die spezifischen Schritte sind wie folgt: 1. Setzen Sie das Element Draggable = "True", um den Zug zu aktivieren; 2. H?ren Sie Dragstart, Dragover, Drop und Dragend Events; 3. Setzen Sie Daten in DragStart, blockieren Sie das Standardverhalten in Dragover und verarbeiten Sie die Logik im Drop. Darüber hinaus kann die Elementbewegung durch AppendChild erreicht werden, und das Hochladen von Dateien kann durch e.Datatransfer.files erreicht werden. HINWEIS: PURTDEFAULT () muss aufgerufen werden, um einen Tropfen auszul?sen. Die mobile Seite unterstützt schlecht. Es wird empfohlen, eine Bibliothek von Drittanbietern zur komplexen Sortierung zu verwenden.

Es ist eigentlich nicht schwierig, Webseiten Drag & Drop -Funktionen hinzuzufügen, und es kann mithilfe der Drag & Drop -API von HTML5 erreicht werden. Es wird nativ unterstützt und erfordert nicht die Einführung zus?tzlicher Bibliotheken. Es ist für Interaktionen wie Datei -Uploads und Elementsortierungen geeignet.

Vorbereitung: Setzen Sie draggierbare Elemente

Um ein Element gezogen zu werden, fügen Sie zuerst draggable="true" -Merkmal hinzu. Beispielsweise kann ein <div> oder Bild nicht standardm??ig gezogen werden, aber das Drag -Ereignis kann nach dem Hinzufügen dieser Eigenschaft ausgel?st werden. <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175165462390139.jpeg" class="lazy" alt="Fügen Sie Drag & Drop -Funktionen mit der HTML5 -Drag & Drop -API hinzu."><pre class='brush:php;toolbar:false;'> &lt;div draggable = &quot;true&quot;&gt; ziehe mich zum Versuch &lt;/div&gt;</pre><p> Dann müssen Sie mehrere Schlüsselereignisse anh?ren: <code>dragstart , dragover , drop und dragend . Diese Ereignisse entsprechen den Aktionen des Ziehensstarts, des Zeichnens in den Zielbereich, der Freigabe der Maus und den Ziehensenden.

Grundlegender Prozess des Ziehens und Ablegens

Der Luftwiderstandsvorgang ist haupts?chlich in drei Schritte unterteilt:

• Starten Sie das Ziehen : Stellen Sie Dragdaten und Effekte im dragstart -Ereignis ein.
• Ziehen Sie zum Zielbereich : Block Standardverhalten in dragover , andernfalls kann drop nicht ausgel?st werden.
• Kostenlose Platzierung : Verarbeiten Sie Daten in drop und vollst?ndige Logik.

Zum Beispiel m?chten Sie eine Box in einen anderen Bereich ziehen:

 const dragel = document.querySelector ('#Drag');
const Dropzone = document.querySelector ('#Drop-Zone');

Dragel.AdDeVentListener ('Dragstart', (e) => {
  e.Datatransfer.setData ('text/plain', 'Dies ist gezogene Daten');
});

dropzone.addeventListener ('dragover', (e) => {
  E.PreventDefault (); // Das Standardverhalten muss blockiert werden, um den Tropfen auszul?sen
});

dropzone.addeventListener ('Drop', (e) => {
  const data = e.datatransfer.getData ('text/plain');
  console.log ('empfangene Daten:', Daten);
});

Dadurch wird die grundlegendste Drag-and-Drop-Interaktion abgeschlossen.

Erweiterte Drag & Drop: Verschieben von Elementen oder Datei -Uploads

Zus?tzlich zum übergeben von Textdaten k?nnen Sie Drag & Drop verwenden, um DOM -Elemente zu verschieben oder Dateien hochzuladen.

Wenn Sie beispielsweise ein Element von einem Container zu einem anderen ziehen m?chten, k?nnen Sie den Knoten beim drop an den neuen Ort anh?ngen:

 dropzone.addeventListener ('Drop', (e) => {
  const id = e.datatransfer.getData ('text/plain');
  const draggedel = document.getElementById (id);
  dropzone.appendchild (draggegedel);
});

Wenn es sich um ein Datei -Upload -Szenario handelt, z. B. ein lokales Bild auf die Seite, k?nnen Sie die Dateiliste über e.dataTransfer.files abrufen:

 dropzone.addeventListener ('Drop', (e) => {
  const files = e.datatransfer.files;
  für (lass Datei von Dateien) {
    if (file.type.startswith ('image/')) {
      const reader = new fileReader ();
      reader.onload = () => {
        const img = document.createelement ('img');
        img.src = reader.result;
        Dropzone.AppendChild (IMG);
      };
      Reader.ReadasDataurl (Datei);
    }
  }
});

Dieser Teil des Codes kann nach dem Ziehen des Bildes direkt in die Vorschau gebracht werden.

Notizen und FAQs

Einige Details k?nnen leicht übersehen, wenn die HTML5 -Drag & Drop -API verwendet wird:

• dragover muss preventDefault() aufrufen, andernfalls wird drop nicht ausgel?st
• Unterschiedliche Browser k?nnen unterschiedliche Unterstützung für Drag & Drop -Stile wie Drag und Cursor unterstützen.
• Die mobile Unterstützung für native Drag and Drop ist nicht sehr gut, und zus?tzliche Touch -Events sind erforderlich
• Wenn Sie eine komplexe Drag-and-Drop-Sortierung durchführen m?chten, k?nnen Sie in Betracht ziehen, Drittbibliotheken (z. B. sortierbare Js) zu kombinieren.

Grunds?tzlich alles, was es ist. Obwohl die Luftwiderstandsfunktion von HTML5 einfach ist, kann sie nach der Verwendung auch gute Interaktionseffekte erzeugen.