js objektorientierte Methode zum Erzielen eines Drag-Effekts
|
In diesem Artikel wird der spezifische Code zur Implementierung von Drag & Drop in objektorientierter js-Methode zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Das Implementierungsprinzip der Drag-Funktion: (direkt wegnehmen!)
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Dokument</title>
<Stil>
#Kasten {
Position: absolut;
links: 100px;
oben: 100px;
Breite: 100px;
Höhe: 100px;
Hintergrund: rot;
}
#box2 {
Position: absolut;
links: 200px;
oben: 200px;
Breite: 100px;
Höhe: 100px;
Hintergrund: grün;
}
</Stil>
</Kopf>
<Text>
<div id="box">Text</div>
<div id="box2">Text</div>
</body>
<Skript>
Klasse Ziehen {
startMouse = {};
startEl = {};
#el = null;
Konstruktor(el, option) {
dies.#el = el;
diese.option = Option;
dies.start();
}
Start() {
lass bewegen = (e) => {
dies.bewegen(e)
}
dies.#el.addEventListener('mousedown', (e) => {
dies.startMouse = {
x: e.clientX,
y: e.clientY,
}
dies.ondragstart und dies.ondragstart(e)
dies.startEl = dies.getOffset();
document.addEventListener('mousemove', bewegen);
document.addEventListener('mouseup', (e) => {
document.removeEventListener('mousemove', verschieben);
dies.ende(e);
}, {
einmal: wahr
})
e.preventDefault();
})
}
bewegen(e) {
lass jetztMouse = {
x: e.clientX,
y: e.clientY,
}
lass disMouse = {
x: jetztMouse.x - diese.startMouse.x,
y: jetztMaus.y - diese.startMaus.y
}
dies.ondrag und dies.ondrag(e)
this.setOffset(disMouse)
}
Ende(e) {
dies.ondragend und dies.ondragend(e)
}
getOffset() {
zurückkehren {
x: parseFloat(getComputedStyle(this.#el)["links"]),
y: parseFloat(getComputedStyle(this.#el)["oben"])
}
}
setzeOffset(dis) {
dies.#el.style.left = dies.startEl.x + dis.x + 'px'
dies.#el.style.top = dies.startEl.y + dis.y + 'px'
}
}
let box = document.querySelector("#box");
let box2 = document.querySelector("#box2");
lass d = neue Drag(Box);
sei d2 = neues Drag(box2);
lass clonex = null;
d2.ondragstart = (e) => {
clonex = box2.cloneNode(true);
Dokument.Body.AnhängenUntergeordnetesElement(Clonex)
box2.style.opacity = 0,5
}
d2.ondragend = () => {
Dokument.Body.RemoveChild(Clonex);
box2.style.opacity = 1
}
</Skript>
</html>Der endgültige Effekt (der gezogene Block ist der grüne Block)
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Lösung für dieselbe IP nach dem Klonen der virtuellen Ubuntu 18-Maschine
>>: So ändern Sie das MySQL-Passwort auf dem XAMPP-Server (mit Bildern)
Artikel empfehlen
Wie erreicht MySQL die Parallelität mehrerer Versionen?
Inhaltsverzeichnis MySQL-Mehrversionen-Parallelit...
Lösung für das Problem, dass auf der utf8-kodierten Seite unter IE eine Zeile ohne Grund leer bleibt und die utf8-Seite nicht angezeigt werden kann
Der Grund dafür ist, dass alle Dateien in UTF8 kod...
Beispiel einer Skriptmethode für die Bindung von Linux-Dualnetzwerkkarten
Bei der Bedienung und Konfiguration von Linux wir...
Detaillierte Erläuterung der MySql-Analyse langsamer Abfragen und Öffnen des Protokolls langsamer Abfragen
Ich habe mich kürzlich auch mit der Leistungsopti...
Anfänger lernen einige HTML-Tags (3)
Verwandte Artikel: Anfänger lernen einige HTML-Ta...
So entfernen Sie „Enter“, „Senden“ und „Enter != Senden“ aus dem Formular
Um das Problem „Eingeben != Absenden“ zu implement...
MySQL 5.7.10 Installations- und Konfigurations-Tutorial unter Windows
MySQL bietet zwei verschiedene Versionen für unte...
Ein Beispiel für die Verwendung von CSS-Methoden zur Erzielung von Modularität
1. Was sind CSS-Methoden? CSS methodologies könne...
5 Befehle zur Verwendung des Rechners in der Linux-Befehlszeile
Hallo zusammen, ich bin Liang Xu. Bei der Verwend...
Installieren Sie das komprimierte MySQL5.7-Paket schnell unter Windows
In diesem Artikel erfahren Sie, wie Sie das kompr...
Detaillierte Erklärung der verfügbaren Umgebungsvariablen in Docker Compose
Mehrere Teile von Compose befassen sich in irgend...
HTML ist die zentrale Grundlage für die Entwicklung von WEB-Standards
HTML-zentrierte Front-End-Entwicklung entspricht p...
Was Sie über die Transaktionsisolierung von msyql wissen müssen
Was ist eine Transaktion? Eine Transaktion ist ei...
Analyse und Lösung der MySQL-Verbindung, die den Fehler „Authentifizierung fehlgeschlagen“ auslöst
[Problembeschreibung] Auf der Anwendungsseite wir...
Tutorial zu HTML-Tabellen-Tags (13): Regeln für interne Rahmenstilattribute
Mit REGELN kann die Art der inneren Rahmen der Ta...