So implementieren Sie das Ziehen von Elementen in HTML5_HTML5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

Heim

Web-Frontend

H5-Tutorial

So implementieren Sie das Ziehen von Elementen in HTML5_HTML5-Tutorial-Fähigkeiten

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:51 PM

html5 Ziehen von Elementen 拖拽

Viele Frontends verstehen wahrscheinlich nicht, wie man HTML5-Drag-and-Drop implementiert. Dieser Artikel gibt Ihnen einige Ideen. Organisieren und sichern Sie Dateien, um sie später leichter nachschlagen zu können.

Erstes Beispiel:

index.html

XML/HTML-CodeInhalt in die Zwischenablage kopieren

>
<html>
<Kopf>
<meta charset="UTF- 8">
<Titel>ZiehenTitel>
<Stil>
.box{
Breite: 400px;
Höhe: 400px;
float: links;
}
#box1{
Hintergrund: #CCC;
}
#box2{
Hintergrund: #FF0;
}
Stil>
Kopf>
<Körper>
<div id="box1" Klasse="box">div>
<div id="box2" Klasse="box">div>
<img src="http: //pica.zol-img.com.cn/2016/02/1ace90ad77db716547614a18c4a9263g.jpg" alt="" id="img1" />

JavaScript-Code复制内容到剪贴板

"app1.js">
app1.js
/**
* app1.js
*/
var oBox1,
oBox2,
oImg1;
window.onload = function(){
oBox1 = document.getElementById('box1');
oBox2 = document.getElementById('box2');
oImg1 = document.getElementById('img1');
//
oBox1.ondragover = oBox2.ondragover = Funktion(e){
e.preventDefault();
};
//
oImg1.ondragstart = Funktion(e){
e.dataTransfer.setData('text', e.target.id);
};
oBox1.ondrop = dropImg;
oBox2.ondrop = dropImg;
};
Funktion dropImg(e){
e.preventDefault();
var tempImg = document.getElementById(e.dataTransfer.getData('text'));
e.target.appendChild(tempImg);
}

Wissenspunkte einbeziehen

Die folgenden Ereignisse werden während des Drag-and-Drop-Vorgangs ausgelöst:
Lösen Sie ein Ereignis auf dem Drag-Ziel (Quellelement) aus
ondragstart – der Benutzer startet Ziehen des Elements Wird ausgelöst, wenn
ondrag – Wird ausgelöst, wenn das Element gezogen wird
ondragend – Wird ausgelöst, nachdem der Benutzer das Ziehen des Elements beendet hat

Ereignis wird ausgelöst, wenn das Ziel losgelassen wird
ondragenter – Dieses Ereignis wird ausgelöst, wenn das mit der Maus gezogene Objekt in seinen Containerbereich gelangt
ondragover – Wenn ein Objekt wird gezogen Dieses Ereignis wird ausgelöst, wenn das gezogene Objekt in den Containerbereich eines anderen Objekts gezogen wird
ondragleave – Dieses Ereignis wird ausgelöst, wenn das mit der Maus gezogene Objekt den Containerbereich verlässt
ondrop – Während eines Ziehvorgangs Dieses Ereignis wird ausgelöst, wenn die Maustaste losgelassen wird

Ereignisobjekt (ersetzt durch e)

e.target

Die Erklärung auf W3Cschool lautet: Geben Sie das Element zurück, das dieses Ereignis ausgelöst hat (den Zielknoten des Ereignisses). Dieses Zielattribut ist nur mit ie9 und höher kompatibel

e.preventDefault()

Brechen Sie die Standardaktion des Ereignisses ab.

e.dataTransfer.setData()

Legen Sie den Datentyp und den Wert der gezogenen Daten fest:

Kopieren Sie den Code

Der Code lautet wie folgt:

e. dataTransfer.setData("Text",ev.target.id); //Der erste Parameter ist Text (Kleinbuchstaben sind ebenfalls akzeptabel)

e.dataTransfer.getData()

Holen Sie sich die gezogenen Daten:

Kopieren Sie den Code

Der Code lautet wie folgt:

e.dataTransfer .getData( "Text");

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Originaltext: http://www.cnblogs.com/oovwall/p/5213580.html

Erklärung dieser Website

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

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

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Wie lange dauert es, um Split Fiction zu schlagen?

1 Monate vor By DDD

R.E.P.O. Dateispeicherspeicherort: Wo ist es und wie schützt sie?

1 Monate vor By DDD

R.E.P.O. Beste grafische Einstellungen

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

1 Wochen vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7393

Java-Tutorial

1630

CakePHP-Tutorial

1358

Laravel-Tutorial

1268

PHP-Tutorial

1217

Related knowledge

Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles