2011-08-03 6 views
8

오늘 잘 지내고 있습니다. 모바일 웹 사이트에서 스 와이프 거리 (터치 제스처)를 계산하려고합니다. 사용자가 화면에서 얼마나 많은 픽셀을 스 와이프했는지 계산하는 방법은 무엇입니까? ?jQuery-mobile에서 스 와이프 거리를 계산합니다.

$('.cmButtons').live('swipeleft',function(){ 
    console.log("swiped left"); 
}); 
+1

jQuery를 사용하지 않고이를 수행하는 방법 만 알고 있으므로 대답이 아니라 실마리입니다. 스 와이프의 시작 x, y 좌표는 touchStart 이벤트에서 설정됩니다. 거기에서도 startPos를 기본 종료 위치 인 endPos에 지정합니다. touchMove 리스너에서 현재 좌표를 계속 지적하여 endPos 좌표로 만듭니다. touchEnd에서는 startPos와 endPos의 차이점을 확인합니다. 따라서 jQuery는 startPos와 endPos 좌표를 swipeLeft 이벤트에 노출 시키거나 jQuery 외부에서이를 달성하기 위해 자체 플러그인을 연결해야합니다. – Tim

+0

Tim 코드를 추가 할 수 있습니까? 그리고 나는 그것이 약간 다를 수도 있지만 시작하는 기초로 코드를 사용하고 싶습니다 이해 : – Xavier

+1

관련 : http://stackoverflow.com/questions/3183872/does-jquery-preserve-touch-events-properties 및 http : // stackoverflow.com/questions/4755505/recogized-touch-event-using-jquery-for-ipad-safari-browser-is-possible –

답변

2

이 도움이 확실하지만, 베타 2와 함께 그들은 몇 가지 추가 슬쩍 기능

구성 슬쩍 이벤트 임계 값이

추가를 발표했다되지 않음 숫자였다. jquery.mobile.event.js 스 와이프 코드에 하드 코딩 된 상수가 있습니다. 보다 큰 수직 변위를 허용하도록 조정해야하는 개발자의 경우에도 스 와이프를 등록하면이 새로운 기능을 사용하여 조정할 수 있습니다. 덕분에이 기여에 대해 에게 mlitwin.

  • scrollSupressionThreshold (디폴트 : 10px) -이 수평 변위보다, 우리는
  • durationThreshold 스크롤 표시되지 않습니다 (기본값 : 1000ms)으로 깜박임 -이보다 더 많은 시간, 그리고 그것을 슬쩍
  • 아니다 horizontalDistanceThreshold (기본값 : 30px) - 가로 스 와이프 변위가 이보다 커야합니다.
  • verticalDistanceThreshold (기본값 : 75 픽셀) - 스 와이프 수직 변위는 이보다 작아야합니다.
+0

결국 jQuery Mobile에서 탭 - 스 와이프 및 탭 - 스 와이프 이벤트를 시작할 때 트리거하는 사용자 정의 리스너를 작성해야했습니다. 제출해 주셔서 감사합니다. 그것은 나를 올바른 장소에서 시작하게했다. – Xavier

+0

np. 맞춤 리스너도 함께 나눌 수 있습니까? 다른 사람도 도울 수 있었다 –

9

나는 매트 브라이슨에 의해 우수한 jQuery를 TouchSwipe 플러그인 제안 : http://labs.skinkers.com/touchSwipe/합니다.

4 방향 및 1 또는 2 손가락의 터치 & 스 와이프 이벤트가 있습니다. 그리고 스 와이프 거리를 얻을 수있는 SwipeStatus가 있습니다 : http://labs.skinkers.com/touchSwipe/demo/Swipe_status.html

+0

고마워. :) 도움이 됐어. – nagesh

+0

이러한 링크는 이제 죽은 것 같습니다. – Carl

2

나는 방법에서 거리를 얻는 방법을 알아 내지 못했기 때문에, 대신 페이지에 새로운 글로벌 임계 값을 설정했습니다.

//Override the default horizontalDistanceThreshold of 30 
$.event.special.swipe.horizontalDistanceThreshold = 200; 

이전 버전의 jQM (v1.0 여전히 ...)이 사용 중이므로 변경되었을 수 있습니다. 스 와이프 이벤트를 찾기 시작하면 소스에서 쉽게 찾을 수 있습니다.

관련 문제