Javascript div Element mit der Maus bewegen

Letzte Aktualisierung : |  

Ein HTML Element mit der Maus und JavaScript 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 zwei 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 (damit das was außerhalb bleibt nicht sichtbar wird) und 100% breite, so passen wir uns der übergeordneten box anpassen. 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); 



        Mit Javascript in element schreiben

        Um in dem div etwas mit JavaScript auszugeben nutze innerHTML so wie hier als String oder unten mit HTML Element, aber Du kannst auch createElement() nutzen um ein Element zu erstellen.

        // JS CODE
           0  // InnerHTML  1  div.innerHTML = "Hallo Welt";  2  // Or  3  div.innerHTML = "<div>Hallo Welt</div>";  4    5  // Create element and append  6  var elem = document.createElement("DIV");   7  elem.innerHTML = "Hallo Welt";  8  div.appendChild(elem); 


          Verbesserungsmöglichkeiten für Performance

          Du kannst auch mit transform translate oder auch mit translate3d das ganze realisieren anstatt mit left und top. Des weiteren ist gegeben das meine eine Klasse daraus baut und das ganze erweitert. Vielleicht mit Javascript Canvas, etwas auf der Seite Platzieren und dem Besucher wegwischen lassen.

          Probier es aus, spiele ein wenig damit und Du wirst sehen es macht ein Riesen Spass.

          Oder auch wenn Du mit der Maus über die gewünschte Oberfläche hinaus fährst, kannst Du den mousdown status wieder auf false setzen so das man nochmal greifen muss. Weil wenn man jetzt über die Fläche hinaus fährt dann wird er wieder andocken sobald man wieder rein fährt.

          Bei fragen, Kritik oder auch anderen Anregungen freu ich mich über ein Kommentar.
          Hier findest Du das ganze Beispiel zum Download.
           JS Element bewegen

          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 © 2019 | Alle Rechte Vorbehalten
          In cooperation with Hyperly