In diesem Artikel wird die Verbesserung der HTML5-Drag-and-Drop-Funktionen für mehrere Elemente zur Handhabung und Tastatur-Zug?nglichkeit verbessert, wodurch sowohl die Benutzer von Seh- als auch Bildschirmleser zugute kommen. Angenommen, die grundlegende Vertrautheit mit der Drag-and-Drop-API (siehe Einführungsartikel für Anf?nger) werden wir uns auf die Erweiterung der Funktionen konzentrieren.

W?hrend die Kerndatenmanipulation für mehrere Elemente einfach ist (unter Verwendung eines separaten Arrays anstelle von dataTransfer), nimmt die Komplexit?t der Benutzeroberfl?che erheblich zu. Wir werden Vorauswahlmechanismen und Tastaturunterstützung ansprechen, da der native Drag-and-Drop fehlt. HINWEIS: Berührungsereignisse und Browser -Polyfills liegen au?erhalb des Bereichs dieses Artikels. Die vorgestellte L?sung funktioniert innerhalb einer einzelnen Seite, nicht über Windows.

Schlüsselverbesserungen:

• Verbessertes HTML5-Drag-and-Drop für mehrere Elementauswahl und Tastaturnavigation, Verbesserung der Zug?nglichkeit.
• Ein Array verfolgt mehrere Elemente w?hrend des Drags und vereinfacht die Integration in dynamische Umgebungen (wie CMS -Systeme), in denen IDs nicht statisch sind.
Die Zug?nglichkeit der Tastatur
• wird mithilfe von ARIA -Attributen (aria-grabbed, aria-dropeffect) und Standard -Tastenanschl?gen implementiert (Speicherplatz für Auswahl, Steuerung M/Befehl m für Tropfen).
• vereinfachte Schnittstelle vermeidet eine zusammenh?ngende Auswahl und behandelt alle Modifikatortasten gleicherma?en für nicht verknüpfte Selektionen.
• Dynamische ARIA-Attribut-Updates sorgen für nahtlose Quermodale (Maus/Tastatur) Interaktion.
• robuste Cross-Browser-Kompatibilit?tsangebote mit Problemen wie Drop-Ereignissen, die nicht auf Mac/Webkit mit gedrückter Befehlstaste abgefeuert werden (mit dragend für die Abschlusses von Drop).

grundlegendes Ziehen und Drop (vereinfachtes Beispiel):

Ein funktionales Beispiel zeigt grundlegende Drag & Drop für ein einzelnes Element unter Verwendung der Maus-Interaktion. Der Code beh?lt eine Elementreferenz bei, anstatt sich auf dataTransfer für Element-IDs zu verlassen, um den Prozess zu vereinfachen und die Anpassungsf?higkeit an serverseitige Anwendungen zu verbessern. effectAllowed und dropEffect werden aufgrund einer inkonsistenten Browserunterstützung weggelassen. Draggable Attribute werden über JavaScript dynamisch angewendet, wobei Bedenken trennten und den Ausschluss von kaputten Implementierungen (wie ?ltere Opernversionen) erm?glichen. Die HTML verwendet data-draggable Attribute zur Identifizierung.

zug?ngliche Drag & Drop -Implementierung:

Barrierefreiheit ist von gr??ter Bedeutung. Wir werden uns an die Richtlinien für die Aria Authoring Practices für Drag-and-Drop halten:

1. draggable Elemente verwenden aria-grabbed="false" und sind mit Tastaturen navigierbar.
2. LeaceBar w?hlt Elemente aus; aria-grabbed wird bei der Auswahl "wahr".
3. Steuerungsm/Befehl m schlie?t die Auswahl ab (Verknüpfung zum ersten Drop -Ziel).
4. Zielelemente verwenden aria-dropeffect, um zul?ssige Aktionen anzuzeigen.
5. Steuerelement M/Befehl m oder Eingabe führt die Drop -Aktion in einem Zielelement aus.
6. Escape kommt den Betrieb ab.
7. Post-Action-Reinigung wird aria-dropeffect und aria-grabbed.
zurückgesetzt

Wir werden diese Empfehlungen verbessern: Der Tastenanschlag am Ende der Auswahl ist optional, und die Steuerung M/Befehl M wird zum Ablegen erg?nzt. Der Einfachheit halber erm?glichen alle Modifikator-Tasten (Verschiebung, Steuerung, Befehl) eine nicht kontinuierliche Auswahl.

Mehrfachauswahl (Maus und Tastatur):

Der Code fügt den Draggable -Elementen aria-grabbed und tabindex Attribute hinzu. Die Mausauswahl verwendet mousedown (Single/Reset) und mouseup (Deaktivieren/Multiple). Die Tastaturauswahl verwendet keydown mit Leertaste für die Auswahl und den Umgang mit Modifikatoren für mehrere Auswahlen. Eine selections.owner Eigenschaft stellt sicher, dass die Auswahl auf einen einzelnen Beh?lter beschr?nkt ist. Die Funktionen addSelection, removeSelection und clearSelections verwalten den Auswahlzustand.

Ziehen Sie die Auswahl (Maus und Tastatur):

aria-dropeffect wird verwendet, um gültige Tropfenziele anzuzeigen. Die Tastaturinteraktion fügt bei der Auswahl aria-dropeffect="move" hinzu. Für die Wechselwirkung von Maus verwalten dragenter und dragleave Ereignisse einen Schwebstatus mithilfe einer related -Variablen und der getContainer -Funktion, um das Ereignis zu verarbeiten. tabindex wird von Elementen innerhalb von Zielcontainern entfernt, um die Tastaturnavigation zu verbessern.

Ablegen der Auswahl (Maus und Tastatur):

Das Ereignis (Maus) verarbeitet das Abnehmen und Zurücksetzen. Ein dragend -Ereigner wird aufgrund von Browser -Inkonsistenzen weggelassen. Die Tastaturinteraktion verwendet ein drop Ereignis in Zielcontainern, um Tropfen zu verarbeiten, und verwalten den Fokus, um Probleme zu vermeiden. keydown

Weitere Verbesserungen:

Zukünftige Verbesserungen k?nnen Berührungs-/Zeiger -Unterstützung, Browser -Polyfills, Auswahlsortierungen, anpassbare Kopier-/Verschiebungsaktionen, zusammenh?ngende Auswahl, benutzerdefinierte Dragghosts und visuelle Hinweise w?hrend der Schlepper. Der Code ist auf GitHub verfügbar (Link im Originaltext angegeben).

FAQs:

Der FAQS-Abschnitt enth?lt klare und pr?zise Antworten auf h?ufige Fragen zur Implementierung der zug?nglichen Drag-and-Drop-Implementierung, der Abdeckung mehrerer Elemente, Ablagerungsbereiche, Bestellregelung, Fehlerbehandlung und Tests.

Das obige ist der detaillierte Inhalt vonZugangswiderstand mit mehreren Elementen zug?nglich. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!