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

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

---

이미 프로젝트에 jQuery UI 슬라이더를 스타일링하고 구현했습니다. 이동식이고 제대로 확장되지만 탭 앤 드래그는 허용되지 않습니다. 대신 슬라이더를 이동하려는 위치를 터치해야합니다. jQuery 모바일 UI가이를 지원하지만 이미있는 것에 시간을 투자했습니다.

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

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

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

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

고마워, 세스

---

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에서의 스타.

---

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

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

감사.

참고 URL : https://stackoverflow.com/questions/13808663/jquery-ui-slider-touch-drag-drop-support-on-mobile-devices