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

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

저는 이미 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);
  }
});

jQueryui는 터치 지원이 없습니다.당신은 그것을 jQuery-ui 터치 펀치와 함께 사용해야 합니다.

jQueryui 다음에 스크립트를 추가하면 됩니다.

<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>

참고: 이 레포에게 깃허브의 별을 주는 것이 좋습니다.

그냥 이 js를 연결하면 됩니다.

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

감사해요.

만약 당신이 워드프레스에 있다면, 당신은 이 코드를 기능에 사용할 수 있습니다.php:

add_action( 'wp_head', function () {

    // jquery.ui.touch-punch
    wp_enqueue_script( 'jquery.ui.touch-punch', '//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js', [], '0.2.3',false );

}, 999 );

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