jQuery 트리거 draggable 시작 및 중지 touchmove 이벤트

Question

내가 잘못하면 나를 바로 잡아주세요!

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

상기 URL은 jQuery를 드래그하여 기능성 조합 숫자 키패드를 나타낸다. 터치 장치 (js의 touchmove 이벤트)에서이 기능을 사용하고 싶습니다. 나는 그것을 시도하지만 다음 코드를 찾았습니다.

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); 
}; 

위의 코드에서 touchmove가 작동합니다. 그러나 제대로. 터치 장치에서 드래그하는 동안 반복 가능한 숫자가 작동하지 않고 y 축 스크롤 위치가 jQuery 드래그 가능한 것과 같지 않습니다 (드래그 가능한 함수 y 축 증가/감소가 35 픽셀로 스크롤 됨).

정확하게 설명하지 않았다고 생각합니다. 사실 https://codepen.io/MrHill/pen/kLvcw 조합 번호 잠금 기능이 터치 장치에서 작동합니다.

이 코드는 로그인 모듈에있는 내 동생 대학 미니 프로젝트에 필요합니다. 아무도 나를 도울 수 없습니까? 미리 감사드립니다.

Answer 1

이 코드는 완벽하게 작동합니다. 이걸 찾았습니다. 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); 
}