jQuery trigger ziehbar start und stopp von touchmove event

Question

Bitte korrigieren Sie mich, wenn ich falsch liege!

https://codepen.io/MrHill/pen/kLvcw

Die obige URL zeigt funktionelle Kombination Zahlenschloss mit jQuery ziehbar. Ich möchte dies in Touch-Geräten verwenden (touchmove-Ereignis in js). Ich versuche, es zu googeln, aber ich fand folgenden Code

jQuery(".lock-dial ul").draggable(); 
jQuery.fn.draggable = function() { 
    var offset = null; 
    var start = function(e) { 
     var orig = e.originalEvent; 
     var pos = jQuery(this).position(); 
     offset = {     
      y: orig.changedTouches[0].pageY - pos.top 
     }; 
    }; 
    var moveMe = function(e) { 
     e.preventDefault(); 
     var orig = e.originalEvent; 
     jQuery(this).css({ 
     top: orig.changedTouches[0].pageY - offset.y, 
     }); 
    }; 
    this.bind("touchstart", start); 
    this.bind("touchmove", moveMe); 
}; 

In dem oben genannten Code touchmove funktioniert. aber nicht richtig. beim Ziehen von Touch-Geräten funktionieren die wiederholbaren Zahlen nicht und die Scroll-Position der y-Achse ist nicht gleich jQuery ziehbar (Scrollen in ziehbarer Funktion Y-Achse Inkrementieren/Dekrementieren um 35 px).

Ich denke, ich habe nicht richtig erklärt. Eigentlich https://codepen.io/MrHill/pen/kLvcw Kombination Zahlenschloss Funktionalität arbeiten mit Touch-Geräten.

Dieser Code wird für mein Bruder College Mini-Projekt in Login-Modul benötigt. Könnte mir bitte jemand helfen? Danke im Voraus.

Answer 1

Dieser Code funktioniert perfekt für mich. Ich fand dies von Javascript Drag and drop for touch devices

function touchHandler(event) { 
    var touch = event.changedTouches[0]; 

    var simulatedEvent = document.createEvent("MouseEvent"); 
     simulatedEvent.initMouseEvent({ 
     touchstart: "mousedown", 
     touchmove: "mousemove", 
     touchend: "mouseup" 
    }[event.type], true, true, window, 1, 
     touch.screenX, touch.screenY, 
     touch.clientX, touch.clientY, false, 
     false, false, false, 0, null); 

    touch.target.dispatchEvent(simulatedEvent); 
    event.preventDefault(); 
} 

function init() { 
    document.addEventListener("touchstart", touchHandler, true); 
    document.addEventListener("touchmove", touchHandler, true); 
    document.addEventListener("touchend", touchHandler, true); 
    document.addEventListener("touchcancel", touchHandler, true); 
}