Empfohlener Inhalt im Zusammenhang mit nativem Drag-and-Drop

Dragable-Attribut Wir haben bereits einige relevante Kenntnisse über natives Drag & Drop in HTML5 eingeführt. Heute werde ich Ihnen einige weitere kleine Dinge im HTML5-Drag-and-Drop vorstellen. Schauen wir uns das ohne weitere Umschweife gemeinsam an. Standardmäßig sind Links, Text und Bilder ziehbar, sodass Sie zum Ziehen keinen Code schreiben müssen. Wenn Sie möchten, dass andere Element-Tags ziehbar sind, ist dies nur mit HTML5 möglich. HTML5 gibt das Dragable-Attribut für alle HTML-Elemente an und gibt an, ob das Element gezogen werden kann. Das Dragable-Attribut wird in Link- und Bild-Tags automatisch auf true gesetzt, und der Standardwert des Dragable-Attributs anderer Elemente ist False. Browser, die das Dragable-Attribut unterstützen, sind: Firefox 4+, Chrome, IE 10+ und Safari 5+. Opera 11.5 und frühere Versionen unterstützen die HTML5-Drag-and-Drop-Funktion nicht. Damit Firefox außerdem ziehbare Attribute unterstützen kann, müssen Sie einen Ondragstart-Ereignishandler hinzufügen und einige Daten im dataTransfer-Objekt speichern

1. vier ziehbare Dragable-Attribute und andere Mitglieder)

Einführung: Wir haben Ihnen bereits mehrere Artikel über HTML5 vorgestellt Kenntnisse über natives Drag & Drop in China. Heute werde ich Ihnen einige weitere kleine Dinge im Html5-Drag-and-Drop vorstellen. Schauen wir uns das ohne weitere Umschweife gemeinsam an.

2. HTML5-tatsächlicher Kampf und Analyse von nativem Drag & Drop (drei dataTransfer-Objekte)

Einführung: Obwohl natives Ziehen durch Dragstart-, Drag- und Dragend-Ereignisse implementiert wird. Dies ist jedoch nur Drag & Drop. In IE6 und IE7 gibt es immer noch einige Drag & Drop-Probleme, und der Datenaustausch ist nicht implementiert. Um den Datenaustausch zu realisieren, hat IE5 das dataTransfer-Objekt eingeführt. Das dataTransfer-Objekt ist eine Eigenschaft des Ereignisobjekts und wird zum Übertragen von Daten im String-Format vom gezogenen Element zum Drop-Ziel verwendet. Da es sich um eine Eigenschaft des Ereignisobjekts handelt, kann auf das dataTransfer-Objekt nur innerhalb des Ereignishandlers des Drag-and-Drop-Ereignisses zugegriffen werden. Im Event-Handler können Sie die Eigenschaften und Methoden dieses Objekts verwenden, um die Drag-and-Drop-Funktionalität zu vervollständigen.

3. HTML5 tatsächlicher Kampf und Analyse des nativen Drag (zwei Drag-Ereignisse Dragstart, Drag und Dragend)

Einführung: Durch Drag-Events können wir das Ziehen vieler Dinge steuern. Welches Element oder wo das Drag-Ereignis auftritt, ist am kritischsten. Einige Ereignisse werden auf dem gezogenen Element ausgelöst, andere auf dem Ablageziel. Wenn ein Element gezogen wird, werden folgende Ereignisse ausgelöst: Dragstart-Ereignis, Drag-Ereignis und Dragend-Ereignis.

4. HTML5 tatsächlicher Kampf und Analyse des nativen Drag (Überblick über den Drag-and-Drop-Verlauf)

Einleitung: Wenn ich Drag & Drop erwähne, denke ich an einen sehr interessanten Effekt während des JavaScript-Trainings, nämlich Drag & Drop. Sie können ein Objekt mit der Maus an eine beliebige Stelle ziehen.

Das obige ist der detaillierte Inhalt vonEmpfohlener Inhalt im Zusammenhang mit nativem Drag-and-Drop. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!