JQuery Ui - draggable() - Auf dem Smartphone kann man den Cursor im Textfeld nicht verschieben

[ebody]

Hallo,

wenn man sich den Code hier vorab anschaut, lässt es sich hoffentlich besser erklären https://codepen.io/ebody/pen/rNaxdao. Siehe auch die Values von den beiden Input Feldern im HTML Bereich.

Ich verwende ein Samsung Galaxy S7, Android und den Chrome Browser. Zudem JQuery UI draggable().

Das erste Textfeld liegt in einem Eltern Element welches verschoben werden kann. Das führt zu verschiedenen Schwierigkeiten, speziell auf einem mobilen Gerät.

Wenn man auf das 1. Textfeld tippt, wurde es nicht "aktiviert", so dass man Text eingeben kann. Das ist jetzt zumindest möglich. Das Textfeld wird jetzt zwar aktiv und man kann auch Text eintippen, aber man kann den Cursor z.B. nicht anders positionieren.

Bei dem 2. Textfeld ist das alles möglich und man erkennt (hoffe ich) schnell den Unterschied.

Im 2. Textfeld erscheint so ein kleiner blauer Pin unter dem Cursor, damit kann man den Cursor versetzen. Das ist in Textfeld 1 nicht möglich, dort erscheint auch kein blauer Pin.

Hat jemand eine Idee, wie sich auch im 1.Textfeld der Cursor positionieren lässt. Es sich genauso verhält wie im 2. Textfeld?

Gruß ebody

[ebody]

Hab die Lösung: https://codepen.io/ebody/pen/rNaxdao

Der entscheidende Part war draggable auf "disable" zu setzen, wenn auf das Textfeld geklickt wird.

$('#drag > input').on('click touchstart', function(){
 $('#drag').draggable('disable');
});

Gruß ebody