T-Rex: jQuery Bewegungstoleranz bei Drag Start

Moin,

ich hab da so ein Element. Das hat sowohl einen Click als auch einen Drag. Bei Click soll etwas passieren, sagen wir mal es soll grün werden, und bei drag soll es blau werden. Damit es nicht immer gleich blau wird, habe ich einen delay eingebaut. Damit das Element aber nicht unschön durch die Gegend springt, habe ich den delay sehr klein gewählt -> 50ms.

Bei fast allen Smartphones funktioniert diese Methodik wunderbar. Jetzt bekomme ich die Information, dass es bei Samsung nicht funktioniert. Anscheinend funktioniert das delay nicht oder der User (von dem ich die Fehlermeldung bekam) ist zu langsam beim Klicken. Auf jeden Fall wird das Element immer sofort blau. Ein Click soll nicht möglich sein.

Ein Delay ein zu bauen ist, wie ich finde, eine Notlösung. Hat jQuery halt so hergegeben und war schnell eingebaut und pragmatisch. "Richtiger" wäre jedoch eine Bewegungstoleranz zu haben. Sprich, erst wenn ich mich z.B. 10px vom ersten Mousdown (bzw. Dragstart) entfernt habe, wird es als Drag gewertet. Alles andere wird als Click gewertet. Das würde ebenfalls bedeuten, dass der Drag auch nach 10 Minuten nicht ausgelöst wird, sofern man den Finger nicht bewegt. Ist für meinen Fall auch genau so erwünscht.

Bevor ich da jetzt selber etwas erfinde stelle ich mir natürlich die Frage, gibt es da bereits eine fertige Lösung? Eine Erweiterung des Drags? Oder eine fertige Lösung in irgendeinem Forum?

Richtig perfekt wäre eine Angabe wie bei delay. ... tolerance: 10px oder so

Gruß Toleranter T-Rex

  1. Hey T-Rex, schön mal wieder von dir zu hören :)

    Richtig perfekt wäre eine Angabe wie bei delay. ... tolerance: 10px oder so

    Hast du dir das in etwa so vorgestellt? https://jsfiddle.net/82f0Lv1m/

    1. Hi ho :),

      fast! Das Element kann man ja schon von beginn an draggen. Es soll erst los fliegen, wenn es auch grün wird.

      Es gibt da jedoch eine gute und eine schlechte Nachricht. Die gute, JQuery hat sowas bereits drin. Heißt distance und macht genau das was ich mir vorstelle (wieso ich das die ganze Zeit überlesen habe ist mir selbst ein Rätsel...). Die schlechte Nachricht, mit der Version 1.12 der JQuery UI ist es veraltet. Wir verstehen alle nicht warum.

      Aktuell benutzen wir noch die Version 1.11.X. Ergo könnten wir "distance" benutzen. Zukunftsorientiert ist es jedoch nicht und früher oder später bräuchte ich dafür trotzdem noch eine Lösung.

      Gruß distanzierter T - R e x

      1. Die schlechte Nachricht, mit der Version 1.12 der JQuery UI ist es veraltet. Wir verstehen alle nicht warum.

        Habs gerade mal recherchiert, die offizielle Begründung kann ich gut nachvollziehen.

        Interactions should be instantaneous. These settings [distance and delay] are typically used to prevent accidental drags, but a proper fix for that is to improve the user experience, e.g., using handles to avoid accidental drags.

        https://jqueryui.com/upgrade-guide/1.12/#deprecated-distance-and-delay-options

  2. Erst wenn die Maustaste hochgeht, feststellen ob das Klickobjekt bewegt wurde. Wenn die Position dieselbe ist, war es nur ein Klick. MfG

    1. Hallo pl,

      Erst wenn die Maustaste hochgeht, feststellen ob das Klickobjekt bewegt wurde. Wenn die Position dieselbe ist, war es nur ein Klick. MfG

      Nein, das wird nicht funktionieren, denn du möchtest ja bereits während des dragging eine visuelle Rückmeldung geben (es soll blau werden).

      Bis demnächst
      Matthias

      --
      Rosen sind rot.