suchen
HeimWeb-FrontendH5-TutorialEine detaillierte Einführung in APIs im Zusammenhang mit dem Drag-and-Drop von HTML5-Elementen (Bilder und Text)

Tatsächlich fügt HTML5 nur einige nützliche APIs hinzu
Lassen Sie uns einfacher entwickeln
damit wir uns mehr auf die Geschäftslogik konzentrieren können
Die Verwendung dieser APIs ist auch sehr einfach
Aber ich meine Das Gedächtnis ist nicht sehr gut
Also habe ich es in Form eines Blogs aufgezeichnet (Handbuch lustig)
Heute werde ich über diese Drag-API schreiben

Standard-Drag

Apropos Drag Tatsächlich war die früheste Implementierung der Drag-and-Drop-Funktion IE (IE4).
H5 ist die Drag-and-Drop-Spezifikation, die auf IE-Instanzen basiert.
Im Browser gibt es ein Standard-Drag-and-Drop.
Zum Beispiel , Bilder Ziehen

Ziehen Sie den ausgewählten Text

Ziehen Sie den Link

Element-Ziehen

Der Browser ermöglicht uns standardmäßig das Ziehen von Bildern, Text und Links
Es ist auch möglich, andere Elemente zu ziehen
Nur ​​auf dem Element-Tag Attribut hinzufügen

<p draggable="true"></p>

Wenn dieses Element gezogen wird, zeigt der Browser eine durchsichtige Kopie an

Ereignis ziehen

Ereignis ziehen Es sollte in zwei Kategorien unterteilt werden
Eine davon ist das Ereignis ausgelöst durch das gezogene Element
Das andere ist das Ereignis, das durch das Drag-and-Drop-Zielelement ausgelöst wird

<p id="source" draggable="true"></p><p id="target"></p>  <!-- 样式略 -->
var source = document.getElementById(&#39;source&#39;);var target = document.getElementById(&#39;target&#39;);

Element ziehen

Beim Ziehen eines Elements wird das gezogene Element ausgelöst löst die folgenden Ereignisse aus:

  • Dragstart

  • Drag

  • dragend

Wenn die Maus auf das Element klickt und sich zu bewegen beginnt, wird das Dragstart-Ereignis ausgelöst (analog zu Mousedown).
Das Drag-Ereignis wird während des Ziehvorgangs kontinuierlich ausgelöst (analog zu Mousemove)
Wenn die Maus losgelassen wird, um das Ziehen abzubrechen, wird das Dragend-Ereignis (analog zu Mouseup) ausgelöst

source.ondragstart = function(){
  console.log(&#39;开始拖拽&#39;);
}source.ondrag = function(){
  console.log(&#39;拖拽中&#39;);
}source.ondragend = function(){
  console.log(&#39;拖拽结束&#39;);
}

Zielelement

Wenn das gezogene Element auf ein Zielelement gezogen wird, löst das Zielelement die folgenden Ereignisse aus

  • dragenter

  • Dragover

  • Dragleave

  • Drop

Ziehen Sie das Element auf das Ziel, und das Dragenter-Ereignis wird ausgelöst (analog zum Mouseover)
Wenn sich das gezogene Element auf dem Ziel befindet Element wird das Dragover-Ereignis weiterhin ausgelöst
Zielelement verlassen und Dragleave-Ereignis auslösen (analog zu Mouseout)
Wenn das Element per Drag & Drop in das Zielelement gezogen wird (Maus im Zielelement loslassen) , das Drop-Ereignis wird nicht ausgelöst

target.ondragenter = function(){
  console.log(&#39;拖动进入目标元素&#39;);
}target.ondragover = function(){
  console.log(&#39;目标元素中拖拽&#39;);
}target.ondragleave = function(){
  console.log(&#39;拖动离开目标元素&#39;);
}target.ondrop = function(){
  console.log(&#39;拖放&#39;);
}


Zu diesem Zeitpunkt werden wir feststellen, dass das Element per Drag & Drop verschoben wird in das Zielelement
das Drop-Ereignis wird nicht ausgelöst

Wir haben einen speziellen Cursor (Kreis + Backslash) gesehen
Es bedeutet ungültiges Drag & Drop
Das Drop-Ereignis wird also nicht ausgelöst
Das heißt, Elemente können standardmäßig nicht per Drag & Drop verschoben werden
Solange wir das Standardereignis im Dragover-Ereignis des Zielelements abbrechen, Das Problem kann gelöst werden

target.ondragover = function(e){
  console.log(&#39;目标元素中拖拽&#39;);
  e.preventDefault(); //增}

Datenaustausch

Nur ​​einfaches Ziehen und Ablegen ist bedeutungslos
Wir müssen Daten austauschen
Und der Gegenstand dieses Begriffs Datenaustausch ist der Attribut des EreignisobjektsdataTransfer
Die beiden Kernmethoden von dataTransfer sind setData( ) und getData()
setData() wird zum Festlegen von Daten und getData() zum Empfangen von Daten verwendet

event.dataTransfer.setData(&#39;text&#39;,&#39;some text&#39;);
var text = event.dataTransfer.getData(&#39;text&#39;);//保存在dataTransfer中的数据只能在drop事件处理函数中处理

Wenn wir den ausgewählten Text ziehen
, ruft der Browser standardmäßig dataTransfer auf und legt die entsprechenden Textdaten fest

setData() und getData() sind Zeichenfolgen von Datentypen
Neben dem Texttyp „Text“ umfassen die vom IE definierten Datentypen auch „URL“
H5 ist dafür geeignet. Es wurde erweitert, um verschiedene MIME-Typen anzugeben
Aber aus Gründen der Abwärtskompatibilität , es unterstützt auch „text“ und „URL“
Sie werden „text/plain“ bzw. „text/uri-list“ zugeordnet ”

Wenn die Daten als URL gespeichert werden, wird die Der Browser führt eine spezielle Verarbeitung durch und behandelt ihn als Weblink
(Wenn Sie also den Link in ein anderes Browserfenster ziehen, wird die Webseite geöffnet)


Bei Bedarf können wir die benötigten Daten manuell speichern übertragen werden

var source = document.getElementById(&#39;source&#39;);var target = document.getElementById(&#39;target&#39;);
source.ondragstart = function(e){
  e.dataTransfer.setData('text','传递文本数据');
}
target.ondragover = function(e){
  e.preventDefault();
}
target.ondrop = function(e){
  console.log(e.dataTransfer.getData('text'));
}

Drag-and-Drop-Einstellungen

Es gibt zwei wichtige in dataTransfer Attributes
dropEffect und effectAllowed

dropEffect

dropEffect-Attributwert ist eine Zeichenfolge, die angibt, welche Platzierung das gezogene Element durchführen kann. Verhalten
Um dieses Attribut zu verwenden, müssen Sie

festlegen
  • keine im Dragenter-Ereignishandler Elemente können hier nicht per Drag & Drop gezogen werden (Standardwert für alle Elemente außer Textfelder)

  • Verschieben zum Ziel

  • Kopie zum Ziel kopieren

  • Link-Ziel öffnet das Drag-Element (das Drag-Element muss ein Link sein und eine URL haben)

effectAllowed

Das effectAllowed-Attribut value ist auch eine Zeichenfolge, die angibt, welcher dropEffect das Element ziehen darf
Um dieses Attribut zu verwenden, müssen Sie es in der Dragst-Ereignishandlerfunktion festlegen

  • nicht initialisiert Kein Ziehen und Drop-Verhalten ist festgelegt

  • none kann durch kein Verhalten verursacht werden

  • kopieren Nur dropEffect-Wert ist zulässig kopieren

  • Link Nur der DropEffect-Wert ist zulässig. Link

  • Verschieben ermöglicht nur das Verschieben des DropEffect-Werts.

  • CopyLink ermöglicht das Kopieren des DropEffect-Werts und verknüpfen

  • copyMove ermöglicht das Kopieren und Verschieben von dropEffect-Werten

  • linkMove ermöglicht das Verknüpfen und Verschieben von dropEffect-Werten

  • alle erlaubt jeden DropEffect

Das obige ist der detaillierte Inhalt vonEine detaillierte Einführung in APIs im Zusammenhang mit dem Drag-and-Drop von HTML5-Elementen (Bilder und Text). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
H5: Neue Funktionen und Funktionen für die WebentwicklungH5: Neue Funktionen und Funktionen für die WebentwicklungApr 29, 2025 am 12:07 AM

H5 bringt eine Reihe neuer Funktionen und Fähigkeiten mit sich und verbessert die Interaktivität und Entwicklungseffizienz von Webseiten erheblich. 1. Semantische Tags wie Verbesserung der SEO. 2. Multimedia Support vereinfacht Audio- und Video -Wiedergabe durch und Tags. 3. Canvas Drawing bietet dynamische Grafikzeichnungswerkzeuge. 4. Lokaler Speicher vereinfacht die Datenspeicherung durch LocalStorage und SessionStorage. 5. Die Geolocation-API erleichtert die Entwicklung standortbasierter Dienste.

H5: Schlüsselverbesserungen bei HTML5H5: Schlüsselverbesserungen bei HTML5Apr 28, 2025 am 12:26 AM

HTML5 bringt fünf wichtige Verbesserungen mit sich: 1. Semantische Tags verbessern die Code -Klarheit und SEO -Effekte; 2. Multimedia Support vereinfacht Video- und Audio -Einbettung; 3. Form -Verbesserung vereinfacht die Überprüfung; 4. Offline und lokaler Speicher verbessert die Benutzererfahrung. 5. Leinwand- und Grafikfunktionen verbessern die Visualisierung von Webseiten.

HTML5: Der Standard und seine Auswirkungen auf die WebentwicklungHTML5: Der Standard und seine Auswirkungen auf die WebentwicklungApr 27, 2025 am 12:12 AM

Die Kernmerkmale von HTML5 sind semantische Tags, Multimedia -Support, Offline -Speicher und lokaler Speicher sowie Form. 1. Semantische Tags wie usw., um die Code -Lesbarkeit und SEO -Effekt zu verbessern. 2. Vereinfachen Sie die Multimedia -Einbettung mit Etiketten. 3. Offline-Speicher und lokaler Speicher wie ApplicationCache und LocalStorage unterstützen den netzwerkfreien Betrieb und die Datenspeicherung. 4. Formularverbesserung führt neue Eingangstypen und Überprüfungseigenschaften ein, um die Verarbeitung und Überprüfung zu vereinfachen.

Beispiele für H5 -Code: Praktische Anwendungen und TutorialsBeispiele für H5 -Code: Praktische Anwendungen und TutorialsApr 25, 2025 am 12:10 AM

H5 bietet eine Vielzahl neuer Funktionen und Funktionen und verbessert die Fähigkeiten der Front-End-Entwicklung erheblich. 1. Multimedia-Unterstützung: Einbetten von Medien und Elementen, keine Plug-Ins sind erforderlich. 2. Leinwand: Verwenden Sie Elemente, um 2D -Grafiken und -Animationen dynamisch zu rendern. 3. Lokaler Speicher: Implementieren Sie die persistente Datenspeicherung über LocalStorage und SessionStorage, um die Benutzererfahrung zu verbessern.

Die Verbindung zwischen H5 und HTML5: Ähnlichkeiten und UnterschiedeDie Verbindung zwischen H5 und HTML5: Ähnlichkeiten und UnterschiedeApr 24, 2025 am 12:01 AM

H5 und HTML5 sind verschiedene Konzepte: HTML5 ist eine Version von HTML, die neue Elemente und APIs enthält. H5 ist ein Rahmen für mobile Anwendungsentwicklungen, die auf HTML5 basieren. HTML5 pariert und rendert Code über den Browser, während H5 -Anwendungen Container ausführen und über JavaScript mit nativem Code interagieren müssen.

Die Bausteine ​​des H5 -Codes: Schlüsselelemente und deren ZweckDie Bausteine ​​des H5 -Codes: Schlüsselelemente und deren ZweckApr 23, 2025 am 12:09 AM

Zu den wichtigsten Elementen von HTML5 gehören ,,,,,, usw., mit denen moderne Webseiten erstellt werden. 1. Definieren Sie den Kopfinhalt, 2. Zum Navigieren durch den Link, 3. darstellen den Inhalt unabhängiger Artikel, 4. organisieren Sie den Seiteninhalt, 5. Zeigen Sie den Seitenleisteninhalt an, 6. Definieren Sie die Fußzeile. Diese Elemente verbessern die Struktur und Funktionalität der Webseite.

HTML5 und H5: Verständnis der gemeinsamen VerwendungHTML5 und H5: Verständnis der gemeinsamen VerwendungApr 22, 2025 am 12:01 AM

Es gibt keinen Unterschied zwischen HTML5 und H5, der Abkürzung von HTML5. 1.HTML5 ist die fünfte Version von HTML, die die Multimedia- und interaktiven Funktionen von Webseiten verbessert. 2.H5 wird häufig verwendet, um auf HTML5-basierte mobile Webseiten oder -anwendungen zu verweisen, und eignet sich für verschiedene mobile Geräte.

HTML5: Die Bausteine ​​des modernen Webs (H5)HTML5: Die Bausteine ​​des modernen Webs (H5)Apr 21, 2025 am 12:05 AM

HTML5 ist die neueste Version der Hypertext -Markup -Sprache, die von W3C standardisiert wurde. HTML5 führt neue semantische Tags, Multimedia -Support- und Form -Verbesserungen ein, verbessert die Webstruktur, die Benutzererfahrung und die SEO -Effekte. HTML5 führt neue semantische Tags vor, wie z. HTML5 unterstützt Multimedia-Elemente und es sind keine Plug-Ins von Drittanbietern erforderlich, wodurch die Benutzererfahrung und die Ladegeschwindigkeit verbessert werden. HTML5 verbessert die Formfunktionen und führt neue Eingangstypen wie usw. ein, die die Effizienz der Benutzererfahrung und der Form von Formularverifizierung verbessert.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

EditPlus chinesische Crack-Version

EditPlus chinesische Crack-Version

Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion

MinGW – Minimalistisches GNU für Windows

MinGW – Minimalistisches GNU für Windows

Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software

MantisBT

MantisBT

Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.

SecLists

SecLists

SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.