Javascript div mit der maus bewegen

Letzte Aktualisierung : |  

Ein HTML Element mit der Maus bewegen, die meisten scheitern daran die korrekte Position zu ermitteln und haben ein kleinen ruck drin, weil die falsche Differenz ermittelt wurde. Das geschieht wenn die Berechnung nicht stimmt, da es eine Rolle spielt was man genau machen möchte. Wenn Du ein Div in einem Div bewegen möchtest ist es wichtig wo Du die Events setzt und welches Element Du bewegen willst.

In den meisten Tutorials findest Du das direkt im Body ein element erstellt und eingefügt wird und dieser bewegt wird, sogar genau mit diesen ruck drin. Durch die falsche Berechnung wird dem div die Maus Position übergeben und die alte Position des divs wird überschrieben so das, dass div nicht von der alten Position startet.



Beim Verschieben eingrenzen

Wir setzen hier 2 HTML Elemente um gleich eine Begrenzung mit einzubauen, das heißt, dass wir außerhalb des wrappers nicht mehr schieben können. Doch dies geht nicht nur mit HTML sondern wir brauchen CSS.


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


    Element sichtbar machen und eingrenzen

    Dann das CSS, aber sehr einfach gehalten und nur mit dem was wir benötigen. Den wrapper geben wir ein overflow hidden um so das und 100% breite, so passen wir uns der box an. Das Element was wir bewegen möchten geben wir eine Größe und positionieren mit absolute.


    // CSS CODE
       0  // Das ist unser Begrenzer, die Hoehe kann man anpassen  1  .wrapper {  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  } 


      Koordinaten ermitteln um zu verschieben

      So dann das Javascript noch dazu. Wir setzen das Event auf die div um die erste Position des Mauszeigers zu ermitteln wenn die Maustaste (mousedown) gedrückt wird und halten sie fest, so wie die div Koordinaten.

      Dies tun wir, weil wir wollen nur auf dem div ermöglichen, das schieben auszulösen. Wenn wir diese haben, können wir die Differenz ermitteln und den status auf true setzen. Bei loslassen der Maustaste (mouseup) setzen wir den status wieder auf false. Diese beiden states brauchen wir damit das div nicht die ganze Zeit der Maus folgt, sondern nur bei gedrückt gehaltener Maustaste.

      Am ende setzen wir unser Event auf den wrapper und prüfen zuerst ob Maustaste gedrückt gehalten wird. Wenn dies der fall ist dann erlauben wir das verschieben und rechnen die Koordinaten auf unsere Differenz rauf. So haben wir immer die exakte position egal von wo wir das div anpacken.


      // JS CODE
         0  var elem = document.querySelector('.wrapper'),  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      // maus state auf true setzen  9      mousedown = true;  10      // offset abziehen  11      x = div.offsetLeft - e.clientX;  12      y = div.offsetTop - e.clientY;  13  }, true);  14    15  // div event mouseup  16  div.addEventListener('mouseup', function (e) {  17      // maus state auf false setzen  18      mousedown = false;  19  }, true);  20    21  // element mousemove um zu stoppen  22  elem.addEventListener('mousemove', function (e) {  23      // Ist maus gedruekt  24      if (mousedown) {  25          // jetzt rechnen wir die differenz rauf  26          div.style.left = e.clientX + x + 'px';  27          div.style.top = e.clientY + y + 'px';  28      }  29  }, true); 

        Du kannst auch mit transform translate oder auch mit translate3d das ganze realisieren anstatt mit left und top.

        Dein Kommentar

        * Diese Felder sind erforderlich, E-Mails werden nicht veröffentlicht
        Du kannst diese Tags verwenden: <p>, <em>, <strong>, <u>, <s>, <pre>, <blockquote>
        ?

        Dieses Feld ist optional
        Fülle dieses Feld aus und verbinde Dein Namen mit Deiner Website.

        Die in dieses Kontaktformular eingegebenen Daten werden in unserem System gespeichert, um die Ausgabe des Kommentars sicherzustellen. Ihre E-Mail-Adresse wird gespeichert, um die Anzahl der Kommentare und die zukünftige Registrierung zu bestimmen

        Ich habe gelesen die Datenschutzbestimmungen und Nutzungsbedingungen. Ich bestätige die Übermittlung des Formulars und die Übermittlung meiner Daten.
        tnado SEO & AMP CMS © 2019 | Alle Rechte Vorbehalten
        Created with tnado SEO CMS