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
html5的div一行可以放两个吗html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素,一个元素会独占一行,两个div默认无法在同一行显示;但可以通过给div元素添加“display:inline;”样式,将其转为行内元素,就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别:1、表格主要是用于显示数据的,而列表主要是用于给数据进行布局;2、表格是使用table标签配合tr、td、th等标签进行定义的,列表是利用li标签配合ol、ul等标签进行定义的。

html5怎么让头和尾固定不动html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法:1、使用header标签定义文档头部内容,并添加“position:fixed;top:0;”样式让其固定不动;2、使用footer标签定义尾部内容,并添加“position: fixed;bottom: 0;”样式让其固定不动。

html5中不支持的标签有哪些html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

html5中不支持的标签有:1、acronym,用于定义首字母缩写,可用abbr替代;2、basefont,可利用css样式替代;3、applet,可用object替代;4、dir,定义目录列表,可用ul替代;5、big,定义大号文本等等。

HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5废弃了哪个列表标签html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

Html5怎么取消td边框Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法:1、给td元素添加“border:none”无边框样式即可,语法“td{border:none}”。2、给td元素添加“border:0”样式,语法“td{border:0;}”,将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式,语法“td{border:transparent;}”,将td边框的颜色设置为透明即可。

html5为什么只需要写doctypehtml5为什么只需要写doctypeJun 07, 2022 pm 05:15 PM

因为html5不基于SGML(标准通用置标语言),不需要对DTD进行引用,但是需要doctype来规范浏览器的行为,也即按照正常的方式来运行,因此html5只需要写doctype即可。“!DOCTYPE”是一种标准通用标记语言的文档类型声明,用于告诉浏览器编写页面所用的标记的版本。

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

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

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.

Sicherer Prüfungsbrowser

Sicherer Prüfungsbrowser

Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.

SAP NetWeaver Server-Adapter für Eclipse

SAP NetWeaver Server-Adapter für Eclipse

Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

SublimeText3 Englische Version

SublimeText3 Englische Version

Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!

mPDF

mPDF

mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),