Die wichtigsten Schritte zur Implementierung der draggabbaren Funktion sind: 1.. Verwenden Sie das draggable Attribut von HTML5, um die Elemente draggierbar zu machen. 2. Setzen Sie Dragdaten durch das Dragstart -Ereignis. 3. H?ren Sie sich die Logik "Dragover and Drop Event Processing Placement" im Zielbereich an. V. Die HTML5 Native Drag & Drop -API verwendet eine Reihe von Ereigniskontrollprozessen wie DragStart, Dragover, Drop usw., bei dem draggable benutzerdefinierte Elemente auf driaggable = "true" und das Binden von Dragstart -Ereignissen festgelegt werden müssen und SetData () zum Speichern von Daten aufrufen müssen. Beim Umgang mit Drag & Drop muss das Standardverhalten von Dragover blockiert werden, um das Drop -Ereignis auszul?sen und Daten über getData () zu erhalten, um die Elementbewegung oder die Dateiverarbeitung abzuschlie?en. Beim Hochladen von Dateien müssen Sie die Dateiliste von DataTransfer.files lesen, um den direkten Zugriff auf den Pfad zu vermeiden. Ein h?ufiger Fehler ist, dass das Standardverhalten fehlt, um zu verhindern, dass Drag & Drop -Inhalte empfangen werden.

Die Implementierung von Drag & Drop -Funktionen ist nicht kompliziert, insbesondere wenn Sie bereits mit HTML und JavaScript vertraut sind. HTML5 bietet eine native Drag & Drop-API, mit der wir grundlegende Drag & Drop-Interaktionen abschlie?en k?nnen, ohne sich auf Bibliotheken von Drittanbietern zu verlassen. Schauen wir uns ein paar wichtige Punkte an, um schnell loszulegen.

Was ist die HTML -Drag & Drop -API?

Mit HTML5 Native Drag & Drop -API k?nnen Benutzer Elemente mit ihrer Maus "ziehen" und sie an einen anderen Ort "platzieren". Diese Funktion wird h?ufig in Szenarien wie Datei -Upload, Elementsortierung usw. verwendet.

Es steuert haupts?chlich den Drag- und Drop -Prozess durch eine Reihe von Ereignissen, einschlie?lich dragstart , dragover , drop usw. Das Verst?ndnis der Rolle und Reihenfolge der Ausl?sen dieser Ereignisse ist der erste Schritt bei der Verwendung der API.

Wie macht man ein Element draggierbar?

Standardm??ig sind nur Links, Bilder und irgendeine Formelementelemente draggierbar. Wenn Sie m?chten, dass benutzerdefinierte Elemente (z. B. Divs) gezogen werden, müssen Sie Eigenschaften festlegen:

 <div draggable = "true"> ziehe mich zum Versuch </div>

Binden Sie dann das dragstart -Ereignis an es, das dem Browser mitteilt, was zu ziehen ist:

 Document.querySelector ('Div'). AddEventListener ('DragStart', Funktion (e) {
    e.Datatransfer.setData ("text/plain", e.target.id);
});

Der kritischste Punkt hier ist, setData() -Methode aufzurufen, um die gezogenen Daten so zu speichern, dass sie im Zielbereich erhalten werden k?nnen.

Wie geht es mit dem Ziehen und Ablegen in den Zielbereich?

Als n?chstes müssen Sie einen oder mehrere "Lieferbereiche" angeben, an denen sich Orte befinden, an denen Sie in den Inhalt gezogen werden. Die übliche Praxis ist es, auf dragover und drop -Ereignisse zu h?ren.

• dragover : Das Standardverhalten muss blockiert werden, andernfalls feuert drop nicht aus.
• drop : Holen Sie sich hier gezogene Daten und verarbeiten Sie sie.

Der Beispielcode lautet wie folgt:

 const Dropzone = document.getElementById ('Drop-Zone');

dropzone.addeventListener ('dragover', function (e) {
    E.PreventDefault (); // Das Standardverhalten muss blockiert werden});

dropzone.addeventListener ('Drop', Funktion (e) {
    E.PreventDefault ();
    const data = e.datatransfer.getData ("text/plain");
    const draggedElement = document.getElementById (Daten);
    dropzone.Appendchild (draggedElement);
});

Ein h?ufiger Fehler besteht darin, das Standardverhalten zu vergessen, damit Drag & Drop -Inhalte nicht korrekt empfangen werden k?nnen.

Wie lade ich Dateien hoch, indem ich das Ziehen und Abnehmen laden?

Wenn Sie das Drag-and-Drop-Upload von Dateien unterstützen m?chten, z. B. die Benutzer lokale Dateien zum Hochladen in Webseiten ziehen lassen, müssen Sie FileList Objekt verwenden.

Sie k?nnen drop -Ereignisse anh?ren und die Dateiliste von e.dataTransfer.files erhalten:

 dropzone.addeventListener ('Drop', Funktion (e) {
    E.PreventDefault ();
    const files = e.datatransfer.files;
    für (lass i = 0; i <files.length; i) {
        console.log (Dateien [i] .Name); // Dateiname drucken}
});

Diese Methode wird h?ufig für Funktionen wie Bild -Upload und Dokumentimport verwendet. Es ist zu beachten, dass einige Browser Zugriffswege auf bestimmte Arten von Dateien beschr?nken. Versuchen Sie daher, direkte Lesen von Dateipfaden zu lesen.

Grunds?tzlich ist das. Nachdem Sie diese wichtigen Schritte beherrschen, k?nnen Sie Ihre Funktionen entsprechend Ihren Anforderungen erweitern, z. B. das Hinzufügen visueller Feedback, die Unterstützung mehrerer Auswahlwiderstands und -abf?lle usw. Obwohl es ein bisschen umst?ndlich erscheint, ist es tats?chlich nicht schwierig, es Schritt für Schritt zu tun.

Das obige ist der detaillierte Inhalt vonImplementierung von Drag & Drop -Funktionen mithilfe von HTML -APIs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!