javascript - jQuery trigger draggable start and stop by touchmove event -

please correct me if wrong!

https://codepen.io/mrhill/pen/klvcw

the above url shows functional combination number lock using jquery draggable. want use in touch devices (touchmove event in js). try google 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 above code touchmove working. not properly. while dragging in touch devices repeatable numbers not working , y axis scrolling position not equal jquery draggable (scrolling in draggable function y axis increment/decrement 35px).

i think didn't explain correctly. https://codepen.io/mrhill/pen/klvcw combination number lock functionality work touch devices.

this code needed brother college mini project in login module. please me? in advance.

this code work me. found javascript drag , drop 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); }