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:

Ändern Sie den Mausstil basierend auf der Mausposition
Wenn sich die Maus am Rand und an den vier Ecken des Div befindet, werden verschiedene Stile angezeigt und durch den Cursor geändert
Wenn die Maus auf die Kante und die vier Ecken des Div gedrückt wird, wird die spezifische Koordinatenpunktposition aufgezeichnet und die Größe des Div wird entsprechend der Bewegung der Maus geändert
Größenänderung beim Loslassen der Maus beenden

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:

js realisiert, dass die Maus zieht div nach links und rechts gleitet
js, um Maus-Drag und Zoom-Div-Beispielcode zu erreichen
Verwenden von Javascript zum Implementieren von Maus-Drag-Ereignissen
JS-Implementierung zum Verschieben von Unterfenstern durch Ziehen der Maus
js implementiert die Methode zum Wechseln von Bildern durch Ziehen der Maus
JS-Maus-Drag-Beispielanalyse
Einfacher Drag & Drop-Implementierungscode in JavaScript (Mausereignisse mousedown mousemove mouseup)
jsMind passt die Knotenposition durch Ziehen der Maus an
js, um Beispiel einer Mehrfachauswahlfunktion mit der Maus zu erreichen
JS realisiert den Effekt des Drückens und Ziehens der Maus

<<: Installation von mysql-community-server.5.7.18-1.el6 unter centos 6.5

>>: Vollständige Schritte zum Klonen von CentOS und zur gemeinsamen Nutzung virtueller Linux-Maschinen