title: jquery mobile - navigate through pages using drag and swipe gestures
body: <p>I would like to navigate to different pages using the swipe gestures. And what I mean by that is when I tap and drag the page, the page should slide/drag with the swipe gestures but only change the page when it reaches a certain point, like the facebook app or whatsapp.</p>
  
  <p>I saw these post:</p>
  
  <p><a href="https://stackoverflow.com/questions/23797331/using-swipe-gestures-to-change-pages-in-multi-page-jquery-mobile-application">Using swipe gestures to change pages in multi page jquery mobile application</a></p>
  
  <p><a href="https://stackoverflow.com/questions/24086317/swipe-pages-using-jquery-mobile">Swipe pages using Jquery mobile</a></p>
  
  <p>But in these, there's only the swipe gesture, meaning you can't tap and drag the page. How can I drag and swipe the pages? I hope I was clear. If not please ask. Thank you.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;!--    User page--&gt;
      &lt;div data-role="page" id="page0" data-theme="d"&gt;
          &lt;div data-role="header"&gt;
              &lt;h1&gt;xyz&lt;/h1&gt;
              &lt;div data-role="navbar"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#page0" data-icon="user"&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#page1" data-icon="home"&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#page2" data-icon="action"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div data-role="main" class="ui-content"&gt;
              &lt;h1&gt;User&lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div data-role="footer"&gt;
              &lt;h3&gt;&amp;copy; Kakar Nyori 2015&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;!--    home page--&gt;
      &lt;div data-role="page" id="page1" data-theme="d"&gt;
          &lt;div data-role="header"&gt;
              &lt;h1&gt;xyz&lt;/h1&gt;
              &lt;div data-role="navbar"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#page0" data-icon="user"&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#page1" data-icon="home"&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#page2" data-icon="action"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div data-role="main" class="ui-content"&gt;
              &lt;h1&gt;All&lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div data-role="footer"&gt;
              &lt;h3&gt;&amp;copy; Kakar Nyori 2015&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;!--    Action page--&gt;
      &lt;div data-role="page" id="page2" data-theme="d"&gt;
          &lt;div data-role="header"&gt;
              &lt;h1&gt;xyz&lt;/h1&gt;
              &lt;div data-role="navbar"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#page0" data-icon="user"&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#page1" data-icon="home"&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#page2" data-icon="action"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div data-role="main" class="ui-content"&gt;
              &lt;h1&gt;Action&lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div data-role="footer"&gt;
              &lt;h3&gt;&amp;copy; Kakar Nyori 2015&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;    
  </code></pre>