Javascript div Element mit der Maus bewegen

Letzte Aktualisierung:

In der digitalen Welt von heute spielt JavaScript eine Schlüsselrolle bei der Gestaltung interaktiver und dynamischer Webseiten. Es ist nicht nur eine der populärsten Programmiersprachen, sondern auch ein unverzichtbares Werkzeug für Webentwickler. JavaScript ermöglicht es uns, Webseiten zu animieren, Benutzerinteraktionen zu steuern und sogar komplexe Anwendungen zu erstellen.



Hinweis

Dieses Beispiel funktioniert nahtlos bei schnellen Bewegungen und nutzt die notwendigen Prozesse, ohne dass GPU-Prozessoren benötigt werden.

Doch wie kann man die Kraft von JavaScript nutzen, um alltägliche Aufgaben eleganter und effizienter zu gestalten? In diesem Artikel werden wir uns auf eine spezifische Anwendung konzentrieren: das Bewegen von Div-Elementen mit der Maus. Diese Technik ist weit mehr als nur ein visueller Effekt. Sie kann die Benutzererfahrung verbessern, die Interaktivität steigern und sogar neue Möglichkeiten für Design und Navigation eröffnen.

Von der einfachen Positionierung bis zur Performance-Optimierung – wir werden Schritt für Schritt durchgehen, wie man ein Div-Element mit der Maus bewegt, und dabei einige der besten Praktiken und Techniken von JavaScript nutzen. Ob du ein erfahrener Entwickler bist oder gerade erst mit JavaScript beginnst, dieser Leitfaden wird dir neue Einblicke und Fähigkeiten vermitteln. Also, schnall dich an und lass uns in die aufregende Welt von JavaScript eintauchen!



Die Feinheiten des Bewegens: Verstehen von Position und Differenz

Das Bewegen eines HTML-Div-Elements mit der Maus und Javascript kann eine knifflige Angelegenheit sein, besonders wenn es darum geht, die korrekte Position zu ermitteln. Hast du auch schon einmal erlebt, dass das Element einen kleinen Ruck macht? Das liegt oft daran, dass die falsche Differenz ermittelt wurde.

Der Teufel steckt hier im Detail, denn es spielt eine Rolle, was du genau machen möchtest. Wenn du beispielsweise ein Div innerhalb eines anderen Divs bewegen möchtest, ist es entscheidend, wo du die Events platzierst und welches Element du bewegen willst.

In vielen Tutorials wirst du sehen, dass ein Element direkt im Body erstellt und eingefügt wird und dieses dann bewegt wird – oft sogar mit genau diesem störenden Ruck. Warum passiert das? Durch die falsche Berechnung wird dem Div die Mausposition übergeben, und die alte Position des Divs wird überschrieben. So startet das Div nicht von der alten Position, und das führt zu diesem ungewollten Effekt.



Eingrenzung beim Verschieben von Div-Elementen: HTML und CSS in Aktion

Wenn du mit HTML-Elementen arbeitest und ein Div innerhalb eines anderen bewegst, möchtest du vielleicht eine Begrenzung einbauen, damit du außerhalb des umschließenden Elements nicht mehr schieben kannst. Um das zu erreichen, brauchen wir nicht nur HTML, sondern auch etwas CSS. Schau dir mal diesen Code an:


// HTML CODE
     0  <div class="mover">  1      <div class="move"></div>  2  </div> 

    Durch die Verwendung von zwei HTML-Elementen, dem äußeren "mover" und dem inneren "move" Div, können wir gleich eine Begrenzung einbauen. So wird das innere Div nur innerhalb des äußeren bewegt, und du hast volle Kontrolle darüber, wo es hingeht. Im nächsten Schritt sehen wir uns an, wie wir das mit CSS unterstützen können.



    CSS verwenden, um das Element sichtbar zu machen und zu begrenzen

    Jetzt kommen wir zum CSS-Teil. Wir halten es wirklich einfach und verwenden nur das, was wir wirklich benötigen. Für den "mover" setzen wir "overflow" auf "hidden", damit alles, was außerhalb bleibt, unsichtbar wird. Mit einer Breite von 100% passt sich der "mover" der übergeordneten Box an. Das Element, das wir bewegen möchten, erhält eine feste Größe, und wir positionieren es mit "absolute". So haben wir die Kontrolle, wo es platziert wird, und können es innerhalb der Grenzen des "mover" bewegen. Schau dir den folgenden CSS-Code an:


    // CSS CODE
       0  // Das ist unser Begrenzer, die Höhe kann man anpassen  1  .mover {  2    overflow: hidden;  3    display: block;  4    width: 100%;  5  }  6    7  // Unser Element zum Verschieben  8  .move {  9    position: absolute;  10    width: 150px;  11    height: 150px;  12    left: 0;  13    top: 0;  14    background-color: #333;  15  } 

      Durch die Kombination von "overflow: hidden" und der absoluten Positionierung des inneren Divs haben wir eine saubere und effektive Methode, um das Div innerhalb der Grenzen des "mover" zu bewegen. Dieser Ansatz bietet eine flexible und robuste Lösung für das Verschieben von Div-Elementen mit der Maus.



      Bestimmung der Koordinaten zur Bewegung mit JavaScript

      Jetzt fügen wir etwas JavaScript-Magie hinzu, um das div-Element tatsächlich zu bewegen. Wir beginnen mit dem Festlegen eines "mousedown"-Ereignisses auf dem div, um die Anfangsposition des Mauszeigers zu bestimmen, wenn die Maustaste gedrückt wird. Gleichzeitig halten wir die div-Koordinaten fest.

      Warum machen wir das? Wir möchten nur innerhalb des divs verschieben. Sobald wir die Startposition haben, können wir den Unterschied bestimmen und den Status auf "true" setzen. Wenn wir die Maustaste loslassen (durch ein "mouseup"-Ereignis), setzen wir den Status wieder auf "false". Diese beiden Zustände stellen sicher, dass das div der Maus nicht ständig folgt, sondern nur, wenn die Maustaste gedrückt ist.

      Am Ende setzen wir ein "mousemove"-Ereignis auf den "mover", überprüfen, ob die Maustaste gedrückt ist, und erlauben die Verschiebung. Dann berechnen wir die Koordinaten basierend auf unserem Unterschied. Auf diese Weise haben wir immer die genaue Position, egal wo wir das div greifen. Schauen Sie sich den folgenden Javascript-Code an:


      // JS CODE
         0  let elem = document.querySelector('.mover'),  1  div = document.querySelector('.move'),  2  x = 0,  3  y = 0,  4  mousedown = false;  5    6    // div event mousedown  7    div.addEventListener('mousedown', function (e) {  8    // set mouse state to true  9    mousedown = true;  10    // subtract offset  11    x = div.offsetLeft - e.clientX;  12    y = div.offsetTop - e.clientY;  13    e.preventDefault(); // prevent browser's default drag behavior  14  }, true);  15    16  // div event mouseup  17  document.addEventListener('mouseup', function (e) { // Notice the change here  18    // set mouse state to false  19    mousedown = false;  20  }, true);  21    22  // element mousemove to stop  23  elem.addEventListener('mousemove', function (e) {  24    // Is mouse pressed?  25    if (mousedown) {  26      // now we calculate the difference  27      div.style.left = e.clientX + x + 'px';  28      div.style.top = e.clientY + y + 'px';  29    }  30  }, true); 

        Im Vergleich zu dem Abschnitt weiter unten "Sicherstellen, dass das Element innerhalb der Grenzen bleibt", liegt der Hauptunterschied im Fehlen der Randüberprüfung. Das bedeutet, dass in diesem Beispiel das div-Element nicht darauf beschränkt ist, innerhalb seines Containers zu bleiben. Außerdem wird hier keine Methode verwendet, die die Bewegung des Elements bei schnellen Bewegungen verbessert, was in einigen Fällen zu unerwünschtem Verhalten führen könnte.



        Weitere Verbesserungsmöglichkeiten für Javascript Performance und Interaktivität

        Das Verschieben von Div-Elementen mit Javascript ist nicht nur funktional, sondern bietet auch Raum für Kreativität und Verbesserungen. Hier sind einige Ideen, die du ausprobieren kannst, um das Ganze auf die nächste Stufe zu heben:

        • Verwende transform: translate oder translate3d, um das Verschieben zu realisieren, anstatt die Eigenschaften left und top. Diese Methoden können die Performance verbessern.
        • Erstelle eine Klasse und erweitere die Funktionalität. Vielleicht möchtest du sogar mit Javascript Canvas experimentieren, um etwas auf der Seite zu platzieren und den Besuchern das Wegwischen zu ermöglichen.
        • Setze den "mousedown"-Status auf "false", wenn du mit der Maus über die gewünschte Oberfläche hinausfährst. So muss der Benutzer erneut greifen, anstatt dass das Div automatisch wieder andockt.

        Ich habe bei G+J E|MS gearbeitet und dort solche dinge gebaut:




        Javascript mit requestAnimationFrame

        Durch die Verwendung von requestAnimationFrame in JavaScript kannst du problemlos flüssige und schnell bewegliche Animationen erstellen. Diese Methode stellt sicher, dass der Browser den Bildschirm synchron mit der Aktualisierungsrate des Displays neu zeichnet.


        // JS CODE
           0  let mousedown = false;  1    2  function moveDiv(e) {  3  if (mousedown) {  4  div.style.left = e.clientX + 'px';  5  div.style.top = e.clientY + 'px';  6  }  7  requestAnimationFrame(moveDiv);  8  }  9    10  div.addEventListener('mousedown', function() {  11  mousedown = true;  12  requestAnimationFrame(moveDiv);  13  });  14    15  window.addEventListener('mouseup', function() {  16  mousedown = false;  17  }); 

          Mit diesem Ansatz erfolgen die Aktualisierungen im Einklang mit der Bildschirmaktualisierung, was zu flüssigen Bewegungen selbst bei höheren Geschwindigkeiten führt. Das ist ein wichtiger Vorteil, den JavaScript dir in der Web-Entwicklung bietet.



          Javascript ohne requestAnimationFrame

          Ohne requestAnimationFrame in JavaScript könnten Aktualisierungen nicht mit der Aktualisierungsrate des Bildschirms übereinstimmen. Diese Fehlausrichtung könnte zu weniger flüssigen Bewegungen führen, insbesondere bei schnellem Ziehen.


          // JS CODE
             0  let mousedown = false;  1    2  div.addEventListener('mousedown', function (e) {  3  mousedown = true;  4  }, false);  5    6  window.addEventListener('mouseup', function (e) {  7  mousedown = false;  8  }, false);  9    10  elem.addEventListener('mousemove', function (e) {  11  if (mousedown) {  12  div.style.left = e.clientX + 'px';  13  div.style.top = e.clientY + 'px';  14  }  15  }, false); 



            Sicherstellen, dass das Element innerhalb der Grenzen bleibt

            Ein entscheidender Aspekt bei der Erstellung eines verschiebbaren Elements besteht darin, sicherzustellen, dass es innerhalb seines Containers bleibt. Diese Einschränkung vermeidet unerwartetes Verhalten, das die Benutzererfahrung beeinträchtigen könnte.

            Hier ein Blick auf einen Code-Ausschnitt, der dies erreicht:


            // JS CODE
               0  elem.addEventListener('mousemove', function (e) {  1    if (mousedown) {  2      let newX = e.clientX - oldX;  3      let newY = e.clientY - oldY;  4      if (newX >= 0 && newX <= (elem.offsetWidth - div.offsetWidth)) {  5        div.style.left = newX + 'px';  6      }  7      if (newY >= 0 && newY <= (elem.offsetHeight - div.offsetHeight)) {  8        div.style.top = newY + 'px';  9      }  10    }  11  }, false); 

              Lassen es uns zerlegen, wie dies funktioniert:

              1. Berechnung der neuen Position: Die neuen X- und Y-Positionen werden anhand der aktuellen Position der Maus (e.clientX und e.clientY) und der alten X- und Y-Positionen (oldX und oldY) berechnet.
              2. Überprüfung der Grenzen: Der Code überprüft dann, ob die neuen Positionen innerhalb der Grenzen des Containers liegen. Die Ausdrücke elem.offsetWidth - div.offsetWidth und elem.offsetHeight - div.offsetHeight stellen sicher, dass das verschiebbare Element nicht über die Breite und Höhe seines Containers hinausgeht.
              3. Festlegen der Position: Wenn die neuen Positionen innerhalb der Grenzen liegen, werden die linken und oberen Stile des verschiebbaren Elements aktualisiert und das Element wird auf die neuen Positionen verschoben.


              In ein Div-Element mit Javascript schreiben


              Jetzt wollen wir etwas Interessantes tun und in das Div-Element etwas mit Javascript einfügen. Es gibt verschiedene Möglichkeiten, dies zu tun, und ich zeige dir einige davon. Du kannst entweder die Eigenschaft innerHTML verwenden.

              Schau dir die folgenden Beispiele an, um zu sehen, wie es funktioniert:

              // JS CODE
                 0  // Mit innerHTML direkt einen Text einfügen  1  div.innerHTML = "Hallo Welt";  2  // Oder HTML-Code einfügen  3  div.innerHTML = "<div>Hallo Welt</div>"; 

                Mit innerHTML kannst du einfach und schnell Text oder HTML in ein Div-Element einfügen. Wenn du mehr Kontrolle über das erstellte Element haben möchtest, ist createElement() eine leistungsstarke Methode, die dir ermöglicht, ein neues Element zu erstellen und es genau so zu gestalten, wie du es möchtest.

                Egal, welche Methode du wählst, du hast die Freiheit, deinem Div Leben einzuhauchen und es mit Inhalten zu füllen, die deinen Anforderungen entsprechen.



                Mehrere Elemente mit Javascript Bewegen

                Das Bewegen eines einzelnen Elements ist nützlich, aber was ist, wenn du mehrere Elemente gleichzeitig bewegen möchten? Der Ansatz hierfür erfordert eine etwas andere Struktur:

                1. Elemente auswählen: Wähle alle Elemente aus, die bewegt werden sollen, z.B. mit document.querySelectorAll('.move').
                2. Event Listener hinzufügen: Füge jedem ausgewählten Element einen Event Listener für mousedown, mouseup und mousemove hinzu.
                3. Position aktualisieren: Die Position jedes Elements wird ähnlich wie zuvor aktualisiert, aber in einer Schleife für jedes Element.

                Dies ermöglicht dir, mehrere Elemente auf ähnliche Weise wie ein einzelnes Element zu steuern.



                Dynamisch Elemente mit Javascript Hinzufügen

                Manchmal möchtest du vielleicht ein neues Element zur Seite hinzufügen, das ebenfalls beweglich sein soll. Hier ist ein Beispiel, wie du das tun können:


                // JS CODE
                   0  // Ein neues Element mit createElement() erstellen und anhängen  1  let elem = document.createElement("DIV");  2  elem.className = 'move'; // Wichtig, wenn Sie die Klasse verwenden, um bewegliche Elemente zu wählen  3  elem.innerHTML = "Hallo Welt";  4  div.appendChild(elem); 

                  Nachdem das neue Element erstellt wurde, müsset sicherstellen, dass auch die Event Listener hinzugefügt werden, wie in Abschnitt 4 beschrieben. Dies ermöglicht, dass das neue Element genauso beweglich ist wie die ursprünglichen Elemente.

                  Durch die Kombination dieser Techniken kannst eine vielseitige und interaktive Benutzeroberfläche erstellen, die sowohl einzelne als auch mehrere Elemente steuern kann, einschließlich solcher, die dynamisch zur Seite hinzugefügt werden.



                  JavaScript für Mobile Geräte: Touch-Events hinzufügen

                  In einer Welt, in der immer mehr Menschen mobile Geräte nutzen, ist es von entscheidender Bedeutung, dass unsere Webseiten und Anwendungen auf Touch-Interaktionen reagieren. Hier zeige ich dir, wie du die Funktionalität eines JavaScript-Codeausschnitts erweitern kannst, um sowohl Maus- als auch Touch-Ereignisse zu unterstützen.

                  Die Anpassung für mobile Geräte erfordert die Ergänzung von drei spezifischen Touch-Event-Listeners: touchstart, touchend, und touchmove. Diese Ereignisse entsprechen den Maus-Ereignissen mousedown, mouseup, und mousemove, die auf Desktop-Geräten verwendet werden.

                  Zum Beispiel:


                  // JS CODE
                     0  div.addEventListener('mousedown', start, false);  1  div.addEventListener('touchstart', start, false); 

                    Durch das Hinzufügen der Touch-Event-Listeners neben den Maus-Event-Listeners stellt man sicher, dass die Benutzerinteraktion sowohl auf Desktop- als auch auf mobilen Geräten reibungslos funktioniert.

                    Ein entscheidender Punkt hierbei ist die korrekte Handhabung der Koordinaten. Bei Touch-Events müssen wir die touches[0].clientX und touches[0].clientY Eigenschaften verwenden, um auf die X- und Y-Koordinaten zuzugreifen. Das ermöglicht es uns, die Position sowohl für Maus- als auch für Touch-Interaktionen korrekt zu verarbeiten.

                    Die Integration dieser einfachen Anpassungen macht deine Webseite oder Anwendung vollständig mobilfähig und sorgt für eine konsistente Benutzererfahrung über verschiedene Plattformen hinweg. So wird deine JavaScript-Anwendung nicht nur vielseitiger, sondern auch zukunftssicher in einer zunehmend mobilorientierten Welt.



                    Fazit

                    Probier es aus, spiel ein wenig damit herum, und du wirst sehen, es macht riesigen Spaß! Und wenn du noch weiter gehen möchtest, findest du das gesamte Beispiel zum Download hier:

                     JS Element move (Github)

                    Komplette beispiel:


                    // HTML CODE
                       0  <style>  1    .mover { overflow: hidden; display: block; width: 100%; height: 300px; position: relative; }  2    .move { position: absolute; width: 150px; height: 150px; left: 20px; top: 20px; background-color: #333; }  3  </style>  4  <div class="mover">  5    <div class="move"></div>  6  </div>  7  <script>  8    let moverclass = {  9      __init: function () {  10        var elem = document.querySelector('.mover'),  11            div = document.querySelector('.move'),  12            oldX = 0,  13            oldY = 0,  14            mousedown = false;  15    16        function start(e) {  17          mousedown = true;  18          var clientX = e.clientX || e.touches[0].clientX;  19          var clientY = e.clientY || e.touches[0].clientY;  20          oldX = clientX - div.offsetLeft;  21          oldY = clientY - div.offsetTop;  22        }  23          24        function end(e) {  25          mousedown = false;  26        }  27          28        function move(e) {  29          if (mousedown) {  30            var clientX = e.clientX || e.touches[0].clientX;  31            var clientY = e.clientY || e.touches[0].clientY;  32            var newX = clientX - oldX;  33            var newY = clientY - oldY;  34            if (newX >= 0 && newX <= (elem.offsetWidth - div.offsetWidth)) {  35              div.style.left = newX + 'px';  36            }  37            if (newY >= 0 && newY <= (elem.offsetHeight - div.offsetHeight)) {  38              div.style.top = newY + 'px';  39            }  40          }  41        }  42    43        div.addEventListener('mousedown', start, false);  44        div.addEventListener('touchstart', start, false);  45          46        window.addEventListener('mouseup', end, false);  47        window.addEventListener('touchend', end, false);  48          49        elem.addEventListener('mousemove', move, false);  50        elem.addEventListener('touchmove', move, false);  51      }  52    };  53    54    moverclass.__init();  55  </script> 


                      Bei Fragen, Kritik oder anderen Anregungen freue ich mich über einen Kommentar. Viel Spaß beim Experimentieren, und ich hoffe, dass diese Anleitung dir geholfen hat, das Verschieben von Div-Elementen mit Javascript zu meistern!