모바일웹에서 jQueryUI를 사용할 수 있게 해주는 jquery.ui.touch.js

codefactory 2011/08/08 Mobile Web 12

모바일웹을 개발 할 때 jQueryUI를 사용하면 잘 작동하지 않는 기능들이 있습니다. 바로 draggable, sortable과 같이 터치를 해서 드래그앤 드롭을 해야하는 기능들인데요, 이런 기능들은 데스크탑에서는 마우스를 사용해서 클릭해서 드래그하면 되지만 이 기능을 사용한 웹사이트를 스마트폰과 같은 모바일기기에서 열어보면 작동을 안하는 것을 보실 수 있습니다.

스마트폰과 같은 모바일기기에서 jQueryUI의 기능을 사용할 수 있게 해주는 jquery.ui.touch.js (http://code.google.com/p/jquery-ui-for-ipad-and-iphone/) 를 소개해드립니다. 사용방법은 매우 간단합니다. 그냥 jquery.ui.touch.js 파일을 jquery, jqueryui 파일 아래에 놓기만 하면 됩니다.

 

그러면 아래의 URL을 스마트폰에서 접속해 보세요

1. 그냥 jQueryUI 로 만든 sortable

http://codefactory.kr/examples/sortable.html

터치해서 드래그 하려고 하면 잘 안됩니다.

 

2. jquery.ui.touch.js 를 추가해준 sortable

http://codefactory.kr/examples/touch-sortable.html

터치해서 드래그로 항목의 순서들을 바꿀 수 있습니다.

 

간단하게 js 파일 하나만을 추가해주는 것으로 jQueryUI의 drag 관련 기능들을 스마트폰 등을 위한 모바일웹개발에 사용할 수 있게되어 편리합니다.

By codefactory
  • http://www.bing.com/ Nevaeh

    That’s way more clever than I was expeticng. Thanks!

  • Hyo min Bak

    예시를 스마트폰에서 보기 쉽게 해주신 것이 무척 좋습니다.
    좋은 정보 감사합니다!

    • codefactory

      감사합니다..^^

      그런데 제가 볼 때 요즘은 “jQuery UI Touch Punch” http://touchpunch.furf.com/ 라는 라이브러리를 많이 사용하는 것 같습니다.

      참고하시면 좋으실 것 같습니다.

  • 이준

    잘보았습니다 그런데 적용하니 스맛폰 화면이 상하로 이동이 안되네요?

    • codefactory

      안녕하세요
      아 네, 이런 종류의 프로그램들이 기능 자체가 화면에서 뭔가를 드래그해서 움직이는 것이기 때문에 이 동작을 하는 프로그램이 들어가 있는 영역 내에서는 화면의 상하이동이 안됩니다. 화면을 상하이동하려는 손가락의 움직임을 항목을 드래그하려는 움직임으로 인식해서입니다.

      그래서 이런 프로그램을 만들때는 프로그램의 크기를 화면에 꽉차게 하시면 안되고 여백을 두어서, 사용자가 화면의 상하이동을 하고 싶은 경우 여백을 통해서 할 수 있게 만들어주시면 좋습니다.

      • 이준

        감사합니다. 그럼 이런경우 여백을 나눌때 어떤 마크업이 좋은가요?

        • codefactory

          아 네, 드래그 할 부분과 안 할 부분을 따로 떼어놓을 수만 있으면 어떤 마크업이든 괜찮습니다.

          제가 여백을 넣은 예제를 만들어서 http://codefactory.kr/examples/touch-sortable-padding.html 에 올려놓았습니다. 화면과 소스를 한번 살펴보시지요

          그런데 제가 아까 제대로 확인을 안하고 말씀드린 부분이 있었습니다. 죄송합니다.

          제가 지금 예제를 만들면서 해보니 본문에서 소개한 jquery.ui.touch.js 를 사용하니 여백을 통한 화면 상하이동 스크롤이 안되었습니다. 아마 라이브러리가 만든지 오래되서 그런 것 같습니다.

          jquery.ui.touch.js 대신에 http://touchpunch.furf.com/ 이 라이브러리를 한번 사용해보시지요. 제가 지금 만들어 놓은 예제도 이 라이브러리를 사용했습니다.

          감사합니다.

          • 이준

            네. 덕분에 잘배웠습니다 ^^ 감사합니다

          • codefactory

            감사합니다..^^

  • 지웅

    이걸로 하루 종일 고생 했네요 ..최종 여기 까지 도착 했습니다

    결론 : Jquery touch Ui 를 넣어주니까 아주 잘됩니다.

    짝짝짝!

    • codefactory

      감사합니다..^^

  • 주워니

    정말 알기쉽게 부연설명까지 차근차근 설명해주는 블로그군요 자주 방문해서 정보공유하겠습니다. 감사해요♥