모바일 장치에서 jQuery UI 슬라이더 터치 및 드래그 / 드롭 지원

102

이미 프로젝트에 jQuery UI 슬라이더를 스타일링하고 구현했습니다. 반응 형이지만 슬라이더는 터치 및 드래그에 반응하지 않습니다. 대신 슬라이더를 이동하려는 위치를 터치해야합니다. 우리는 이미 jQuery (비 모바일) UI를 광범위하게 사용하고 있기 때문에 터치 및 드래그를 지원하는 jQuery 모바일 UI 로의 스왑을 피하고 싶습니다.

우리가 원하는 기능 : 여기
우리가 사용하는 것 : 여기

데스크톱에서는 차이를 구분할 수 없습니다. 모바일 장치에서는 분명합니다.

누구나이 지원을 jquery UI에 추가하는 방법을 알고 있습니까?

$("#videographers").slider({
  value: 2,
  min: 1,
  max: 3,
  step: 1,
  slide: function(event, ui) {
    return calcTotal(ui.value);
  }
});

— 세스
소스

의 중복 가능성 터치 장치에 jQuery를 UI 슬라이더

— Foreever

답변:

262

jQuery UI는 터치를 지원하지 않습니다. jQuery-ui touch punch 와 함께 사용해야합니다 .

jQuery UI 뒤에 스크립트를 추가하면됩니다.

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>

cdnjs를 사용할 수도 있습니다.

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

참고 : 더 나은 줄 이 REPO에게 Github에서의 스타.

— 사용자 이름
소스

이것은 내 하루를 구합니다!

— Dr3am3rz

대단히 감사합니다! 이것은 정말로 나의 하루를 구한다 !!

— Syamsoul Azrien

예, 슬라이더가 올바른 값을 선택하지 않는 버그도 수정했습니다.

— Ronen Festinger

rails5 Android 및 iOS 기기와 샤름처럼 작동

— 스테프 HEJ

훌륭합니다 .. 원활하게 작동합니다 .. :) 한 가지 관찰은 iOS 장치에서 슬라이더를 밀 때 슬라이더를 눌렀을 때 미끄러지지 않고 터치를 놓으면 그 지점에서 미끄러진다는 것입니다. 왜 이런 일이 발생하는지 아십니까? 이것에 대한 해결책이 있습니까?

— Rahul J. Rane

이 js를 연결할 수 있습니다.

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

감사.

— 소드 I
소스

이로 인해 정말 빠르게 작동합니다. 감사합니다

— tijnn