jQuery trigger draggable start and stop by touchmove event

Question

Please correct me if I am wrong!

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

The above url shows functional combination number lock using jQuery draggable. I want to use this in touch devices (touchmove event in js). I try to google it but I found following 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 the above code touchmove is working. but not properly. while dragging in touch devices repeatable numbers are not working and y axis scrolling position not equal with jQuery draggable (scrolling in draggable function y axis increment/decrement by 35px).

I think I didn't explain correctly. Actually https://codepen.io/MrHill/pen/kLvcw combination number lock functionality work with touch devices.

This code is needed for my brother college mini project in login module. Could anyone please help me? Thanks in advance.

Answer 1

This code perfectly work for me. i found this from 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);
}