Maus über einem Button halten

  • Hallo zusammen,


    mit JavaScript werde ich mich wohl nie anfreunden, deshalb muss ich mal nachfragen:


    Gibt es eine Möglichkeit den Mauszeiger über einem Button zu halten, wenn der linke Mausbutton geklickt wurde. Also, wenn man die Maus bewegt, darf der Mauszeiger die Fläche des Buttons nicht verlassen. Erst wenn man die Maustaste wieder loslässt, darf der Mauszeiger wieder weiter bewegt werden.


    Sinn der Sache ist, ich will so eine Art Splitter bauen, mit dem man einen linken und rechten Div in der Größe verändern kann. Frames kommen dabei nicht in Frage. Das Ändern der Div-Größe ist kein Problem, allerdings rutscht der Mauszeiger bei schneller Bewegungen aus dem Button raus, und dann geht es nicht weiter.



    Danke und Gruß

    M.Scatello

  • Hast du mal überlegt vielleicht beim klick auf den Button ein mousemove Event zu starten, dann wäre es egal, ob die Maus den Button verlässt ?
    Nur so nee Idee.
    Für die Optik könntest du dann ein Mausbild einblenden.
    Mit Javascript ist es sonst nicht möglich die Maus zu bewegen (wäre sonst nee Sicherheitslücke)

  • Die Maus soll ja bewegt werden, aber nur innerhalb der Fläche des Buttons. Wenn man die Maus etwas nach links verschiebt, würde das linke Div schmaler und der Button würde nach links verschoben.

  • basti1012

    Ich habe mir das gerade mal angesehen, sieht nicht schlecht aus. Allerdings bekomme ich es immer wieder hin, dass nach einem mouseup immer noch die div's in der Größe verändert werden. Ich werde mal versuchen, diese Macke zu beseitigen.

    Danke.


    Edit:

    Ich kann das jetzt nachvollziehen. Bleibt man mit der Maus auf gleichen y-Ebene, also die Maus nur horizontal bewegen, dann funktioniert es. Bewege ich die Maus allerdings erst vertikal und dann horizontal, dann scheint mouseup nicht mehr zu funktionieren.

  • Ich glaube, ich hab's. Wenn man

    Code
    addEventListener("mouseup", function(event)

    nicht auf den Button, sondern auf den Body (id wurde vergeben) anwendet, dann scheint das fehlerfrei zu funktionieren.

  • Das mouse up und down Event liegt ja auf den Button.
    Wie du bemerkt hast muss man auf der Y Achse gerade bleiben.( über den Button )
    Meine Idee wäre das mouseup Event nicht auf den Button zu registrieren, sondern auf den div.
    Ich teste das mal gerade.

  • Nein, leider nicht wirklich. Wenn es nur um eine einfache HTML-Seite gehen würde, wäre das kein Problem, aber leider wird die Seite mit Vue.js zusammengebaut und einige Elemente nutzen ebenfalls die Events mousedown, mouseup und mousemove. Ist alles komplizieter als reines HTML/CSS

  • Nein, leider nicht wirklich. Wenn es nur um eine einfache HTML-Seite gehen würde, wäre das kein Problem, aber leider wird die Seite mit Vue.js zusammengebaut und einige Elemente nutzen ebenfalls die Events mousedown, mouseup und mousemove. Ist alles komplizieter als reines HTML/CSS

    Mit Vue.js habe ich auch noch nicht gearbeitet.

    Deswegen Frage ich ob du da schon mal geschaut hast https://www.vuescript.com/resize-element-drag/

    Vieleicht hilft dir das ?

    Unten ist ein Demolink

  • Nein, leider nicht wirklich. Wenn es nur um eine einfache HTML-Seite gehen würde, wäre das kein Problem, aber leider wird die Seite mit Vue.js zusammengebaut und einige Elemente nutzen ebenfalls die Events mousedown, mouseup und mousemove. Ist alles komplizieter als reines HTML/CSS

    Hey,

    Bei Vue Js kann ich dir leider nicht helfen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!