JavaScript implementiert Ziehen mit der Maus, um die Div-Größe anzupassen
|
In diesem Artikel wird der spezifische JavaScript-Code zum Anpassen der Div-Größe durch Ziehen der Maus zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Umsetzungsideen:
Code-Implementierung:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<Stil>
Text, HTML {
Breite: 100 %;
Höhe: 100%;
Rand: 0;
}
#Behälter {
Breite: 200px;
Höhe: 200px;
Polsterung: 15px;
Rand: #00cdcd 2px durchgezogen;
Box-Größe: Rahmenbox;
}
.Artikel {
Cursor: Standard;
Breite: 100 %;
Höhe: 100%;
Hintergrund: #757575;
}
</Stil>
</Kopf>
<body id="body">
<div id="Behälter">
<div Klasse="Artikel"></div>
</div>
<Skript>
//Das Div, dessen Größe geändert werden muss
let c = document.getElementById('Container')
// Body wartet auf Bewegungsereignisse document.getElementById('body').addEventListener('mousemove', move)
// Mauszeiger nach unten-Ereignis c.addEventListener('mousedown', down)
// Ereignis beim Loslassen der Maus document.getElementById('body').addEventListener('mouseup', up)
// Ob die Größenänderung aktiviert werden soll let resizeable = false
// Die Koordinaten der Maus, wenn sie gedrückt wird, und die vorherige Mausposition beim Ändern der Größe speichern, let clientX, clientY
// Die minimale Breite und Höhe, die div ändern kann, sei minW = 8, minH = 8
// Die Position der Maus, wenn sie gedrückt wird, dargestellt durch n, s, w und e let direc = ''
//Größenänderung beenden, wenn Maus losgelassen wird function up() {
Größe veränderbar = false
}
// Größenänderung bei gedrückter Maustaste aktivieren function down(e) {
sei d = getDirection(e)
// Größenänderung nur aktivieren, wenn die Position vier Seiten und vier Ecken umfasst if (d !== '') {
größenveränderbar = true
direc = d
clientX = e.clientX
clientY = e.clientY
}
}
// Mausbewegungsereignisfunktion move(e) {
sei d = getDirection(e)
Cursor loslassen
wenn (d === '') Cursor = "Standard";
sonst Cursor = d + „-Größe ändern“;
// Anzeigeeffekt der Maus ändern c.style.cursor = Cursor;
// Wenn die Größenänderung aktiviert ist, wird die Div-Größe durch Mausbewegungen geändert, wenn (Größe veränderbar) {
// Die Maus wird auf die rechte Seite gedrückt, ändere die Breite if (direc.indexOf('e') !== -1) {
c.style.width = Math.max(minW, c.offsetWidth + (e.clientX - clientX)) + 'px'
clientX = e.clientX
}
// Die Maus wird oben gedrückt, ändere die Höhe if (direc.indexOf('n') !== -1) {
c.style.height = Math.max(minH, c.offsetHeight + (clientY - e.clientY)) + 'px'
clientY = e.clientY
}
// Die Maus wird unten gedrückt, ändere die Höhe if (direc.indexOf('s') !== -1) {
c.style.height = Math.max(minH, c.offsetHeight + (e.clientY - clientY)) + 'px'
clientY = e.clientY
}
// Die Maus ist links gedrückt, ändere die Breite if (direc.indexOf('w') !== -1) {
c.style.width = Math.max(minW, c.offsetWidth + (clientX - e.clientX)) + 'px'
clientX = e.clientX
}
}
}
// Hole die Position des Divs, in dem sich die Maus befindet function getDirection(ev) {
lass xP, yP, Offset, Richtung;
dir = '';
xP = ev.OffsetX;
yP = ev.OffsetY;
Versatz = 10;
wenn (yP < Offset) dir += 'n';
sonst wenn (yP > c.offsetHeight - offset) dir += ‚s‘;
wenn (xP < Offset) dir += 'w';
sonst wenn (xP > c.offsetWidth - offset) dir += 'e';
Rückgabeverzeichnis;
}
</Skript>
</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:
|
<<: Installation von mysql-community-server.5.7.18-1.el6 unter centos 6.5
Artikel empfehlen
Eine kurze Analyse des Hinzufügens von Listener-Ereignissen bei Wertänderungen in der HTML-Eingabe
Der zu erzielende Effekt In vielen Fällen überwac...
Ideen und Codes zur Implementierung der Vuex-Datenpersistenz
Was ist Vuex vuex: ist ein speziell für vue.js en...
Häufige Tomcat-Ausnahmen und Lösungscodebeispiele
Das Unternehmensprojekt wurde in Java entwickelt ...
Installations-Tutorial für die Zip-Version von MySQL 5.7.18
Die MySQL 5.7.18 Zip-Version von MySQL ist nicht ...
4 Möglichkeiten zum Anzeigen von Prozessen in LINUX (Zusammenfassung)
Ein Prozess ist ein Programmcode, der in der CPU ...
Lösung für die verstümmelte Anzeige von Linux SecureCRT
Sehen wir uns die Situation an, in der SecureCRT ...
Einführung in general_log-Protokollwissenspunkte in MySQL
Die folgenden Funktionsdemonstrationen basieren a...
Verwandte Vorgänge zum Hinzufügen und Löschen von Indizes in MySQL
Inhaltsverzeichnis 1. Die Rolle des Index 2. Erst...
JS realisiert Spezialeffekte der Webseiten-Navigationsleiste
In diesem Artikel erfahren Sie mehr über einen pr...
Erläuterung der JavaScript-Funktionssyntax
Inhaltsverzeichnis 1. Gewöhnliche Funktionen 2. P...
Schritt-für-Schritt-Anleitung zum Erstellen einer Kalenderkomponente mit React
Inhaltsverzeichnis Betriebswirtschaftlicher Hinte...
Lösen Sie das Problem der unsicheren Docker x509-Registrierung
Nach der Installation von Docker trat beim Versuc...
Erläuterung der MySQL-Indexoptimierung
Bei unserer täglichen Arbeit führen wir manchmal ...
RHEL7.5 MySQL 8.0.11 Installations-Tutorial
Dieser Artikel zeichnet das Installationstutorial...
Erläuterung der Array-Verarbeitung in React und Redux
Dieser Artikel stellt einige häufig verwendete Fu...