Natives JS zur Implementierung der Drag-Position-Vorschau
|
In diesem Artikel wird eine kleine Demo gezeigt, die beim Ziehen eines Elements eine Vorschau hinzufügt. Der Effekt ist wie folgt:
Nachfolgend sehen Sie die Codeimplementierung. Jeder kann sie kopieren, einfügen und kommentieren.
<!DOCTYPE html>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Natives JS zur Implementierung der Drag-Position-Vorschau</title>
<Stil>
.Kasten {
Position: absolut;
Rand: 1px gestrichelt schwarz;
}
#div1 {
Breite: 100px;
Höhe: 100px;
Hintergrund: gelb;
Position: absolut;
}
</Stil>
<Skript>
fenster.onload = Funktion () {
var oDiv = document.getElementById('div1');
oDiv.onmousedown = Funktion (ev) {
var oEvent = ev || Ereignis;
var disX = oEvent.clientX - oDiv.offsetLeft;
var disY = oEvent.clientY - oDiv.offsetTop;
//Erstelle ein Div mit einem gepunkteten Rahmen
var oNewDiv = document.createElement('div');
oNewDiv.className = "Box";
//Subtrahieren Sie die Rahmengröße, damit sie mit der ursprünglichen Div-Größe übereinstimmt. oNewDiv.style.width = oDiv.offsetWidth - 2 + 'px';
oNewDiv.style.height = oDiv.offsetHeight - 2 + 'px';
oNewDiv.style.left = oDiv.offsetLeft + 'px';
oNewDiv.style.top = oDiv.offsetTop + 'px';
Dokument.body.appendChild(oNewDiv);
document.onmousemove = Funktion (ev) {
var oEvent = ev || Ereignis;
oNewDiv.style.left = oEvent.clientX - disX + 'px';
oNewDiv.style.top = oEvent.clientY - disY + 'px';
};
dokument.onmouseup = Funktion () {
Dokument.onmousemove = null;
Dokument.onmouseup = null;
oDiv.style.left = oNeuesDiv.style.left;
oDiv.style.top = oNeuesDiv.style.top;
//Gepunktetes Kästchen entfernen document.body.removeChild(oNewDiv);
};
};
};
</Skript>
</Kopf>
<Text>
<div id="div1"></div>
</body>
</html>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:
|
<<: Implementierung des Docker View Container Log-Befehls
>>: HTML-Tabellen-Tag-Tutorial (19): Zeilen-Tag
Artikel empfehlen
js, um eine einfache Lotteriefunktion zu erreichen
In diesem Artikel wird der spezifische Code von j...
Einfache Beispiele zum Erstellen gespeicherter Prozeduren, Trigger und zur Verwendung von Cursorn in Navicat (Bilder und Text)
1. Tabellen erstellen <br /> Erstellen Sie ...
Lösung für das Routing-Hervorhebungsproblem von Vue-Komponenten
Vorwort Früher habe ich den Cache verwendet, um d...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.23 unter Win10
In diesem Artikel wird die Installations- und Kon...
Die Lösung von html2canvas, dass Bilder nicht normal erfasst werden können
Frage Lassen Sie mich zunächst über das Problem s...
Detaillierte Erläuterung der Beispiele für CSS-Gewichtswerte (Kaskadierung)
•Es gibt viele Selektoren in CSS. Was passiert, w...
MySQL Null kann 5 Probleme verursachen (alle schwerwiegend)
Inhaltsverzeichnis 1. Zähldaten gehen verloren Lö...
Detaillierte Erläuterung des Ausführungsplans, Beispiel für einen Befehl in MySQL
Vorwort Der Befehl „Explain“ ist die primäre Mögl...
Analyse des Prozesses zur Konfiguration des Alibaba Cloud-Proxy-Warehouses basierend auf Nexus
Das Standard-Remote-Repository von Nexus ist http...
Erstellen einer .NET Core 2.0 + Nginx + Supervisor-Umgebung unter einem Centos7-System
1. Einführung in Linux .NET Core Microsoft hat .N...
Verwenden Sie einige Interviewfragen, um den Ausführungsmechanismus von JavaScript zu untersuchen
Inhaltsverzeichnis Vorherige Wörter Synchron und ...
Detaillierte Erklärung zur Verwendung von Teleport, einer integrierten Komponente von Vue3
Inhaltsverzeichnis 1. Teleport-Nutzung 2. Vervoll...
Optimierung der MySQL 4G-Speicherserverkonfiguration
Da die Anzahl der Besuche auf der Website des Unt...
So erstellen Sie https mit Nginx und dem kostenlosen Tencent Cloud-Zertifikat
Ich habe gelernt, wie man https bekommt. Kürzlich...
CSS-Hacks \9 und \0 funktionieren möglicherweise nicht zum Hacken von IE11\IE9\IE8
Jedes Mal, wenn ich eine Webseite oder ein Formul...