HTML-Drag-Drag-Ereignis
In HTML wird die Ereignisverarbeitung in js abgeschlossen. HTML, js und CSS sind untrennbar miteinander verbunden. Das Folgende ist ein Beispiel für die Handhabung von Drag-and-Drop-Ereignissen in js.
Das Drag-Ereignis ist in zwei Teile unterteilt: Der eine ist die Verarbeitung des Drag-Ziels (d. h. das Drag-Ziel); der andere ist die Verarbeitung des Drag-Ziels (d. h. des Release-Ziels); .
Trigger-Ereignis auf dem Drag-Ziel (Quellelement):
ondragstart – wird ausgelöst, wenn der Benutzer mit dem Ziehen des Elements beginnt
ondrag – wird ausgelöst, wenn das Element gezogen wird
ondragend – wird ausgelöst, nachdem der Benutzer das Ziehen des Elements abgeschlossen 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 Container gelangt
ondragover – Dieses Ereignis wird ausgelöst, wenn ein gezogenes Objekt in den Container eines anderen Objekts gezogen wird
ondragleave – Dieses Ereignis wird ausgelöst, wenn das mit der Maus gezogene Objekt den Bereich seines Containers verlässt
ondrop – Dieses Ereignis wird ausgelöst, wenn die Maustaste während eines Ziehvorgangs losgelassen wird
Der Implementierungscode lautet wie folgt: Box1 und Listen können zueinander gezogen werden
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1{width: 200px;height: 250px;border:2px solid red;}
#lists{ width:200px; height:250px; list-style: none;padding: 0;margin: 10px 0px; border:2px solid blue;}
li{width: 150px;height: 30px; margin: 5px 0; padding:0;background: #ccc; line-height:30px;text-align: center ;}
</style>
<script>
window.onload=function () {
var box1=document.getElementById("box1");
var lists=document.getElementById("lists");
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].draggable=true;
lis[i].flag=false;
//1、拖拽开始
lis[i].ondragstart=function () {
this.flag=true;
}
//2、拖拽移动
two.ondrag=function () {
}
//3、拖拽结束
lis[i].ondragend=function () {
this.flag=false;
}
}
//投放区事件
//1、进入投放区
box1.ondragenter=function (e) {
e.preventDefault();
}
//2、在投放区内移动
box1.ondragover=function (e) {
e.preventDefault();
}
//3、离开投放区
box1.ondragleave=function (e) {
e.preventDefault();
}
//4、完成投放 此时可以在投放区内做处理
box1.ondrop=function (e) {
e.preventDefault();
for(var i=0;i<lis.length;i++){
if(lis[i].flag){
box1.appendChild(lis[i]);
}
}
}
lists.ondragenter=function (e) {
e.preventDefault();
}
lists.ondragover=function (e) {
e.preventDefault();
}
lists.ondragleave=function (e) {
e.preventDefault();
}
lists.ondrop=function (e) {
e.preventDefault();
for(var i=0;i<lis.length;i++){
if(lis[i].flag){
lists.appendChild(lis[i]);
}
}
}
}
</script>
</head>
<body>
<p id="box1"></p>
<ul id="lists">
<li>数据1</li>
<li>数据2</li>
<li>数据3</li>
<li>数据4</li>
<li>数据5</li>
<li>数据6</li>
</ul>
</body>
</html>Darunter: Die Methode getElementsByTagName() gibt eine Sammlung von Objekten mit dem angegebenen Tag-Namen zurück.
e.preventDefault(); soll das Standard-Drag-Ereignis des Systems verhindern.
appendChild() fügt dem angegebenen Steuerelement ein Steuerelement hinzu.
e.preventDefault();
Das Obige ist der gesamte Inhalt des HTML-Drag-Events, ich hoffe, es wird für alle hilfreich sein.
Verwandte Empfehlungen:
Verwenden Sie JS und HTML, um einen einfachen Sketchpad-Code zu erstellen
Js-Prozess zum Betreiben von DOM-Objekten
Das obige ist der detaillierte Inhalt vonHTML-Drag-Drag-Ereignis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
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
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
1381
52
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.
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.
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-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-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-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.
