jquery mobile - 使用拖动和滑动手势浏览页面

Question

我想使用滑动手势导航到不同的页面。我的意思是，当我点击并拖动页面时，页面应该使用滑动手势进行滑动/拖动，但只有在达到特定点时才更改页面，例如facebook app或whatsapp。

我看到了这些帖子：

Using swipe gestures to change pages in multi page jquery mobile application

Swipe pages using Jquery mobile

但是在这些中，只有滑动手势，这意味着您无法点击并拖动页面。如何拖动和滑动页面？我希望我很清楚。如果没有，请问。谢谢。

HTML：

<!--    User page-->
    <div data-role="page" id="page0" data-theme="d">
        <div data-role="header">
            <h1>xyz</h1>
            <div data-role="navbar">
                <ul>
                    <li><a href="#page0" data-icon="user"></a></li>
                    <li><a href="#page1" data-icon="home"></a></li>
                    <li><a href="#page2" data-icon="action"></a></li>
                </ul>
            </div>
        </div>

        <div data-role="main" class="ui-content">
            <h1>User</h1>
        </div>

        <div data-role="footer">
            <h3>&copy; Kakar Nyori 2015</h3>
        </div>
    </div>

<!--    home page-->
    <div data-role="page" id="page1" data-theme="d">
        <div data-role="header">
            <h1>xyz</h1>
            <div data-role="navbar">
                <ul>
                    <li><a href="#page0" data-icon="user"></a></li>
                    <li><a href="#page1" data-icon="home"></a></li>
                    <li><a href="#page2" data-icon="action"></a></li>
                </ul>
            </div>
        </div>

        <div data-role="main" class="ui-content">
            <h1>All</h1>
        </div>

        <div data-role="footer">
            <h3>&copy; Kakar Nyori 2015</h3>
        </div>
    </div>

<!--    Action page-->
    <div data-role="page" id="page2" data-theme="d">
        <div data-role="header">
            <h1>xyz</h1>
            <div data-role="navbar">
                <ul>
                    <li><a href="#page0" data-icon="user"></a></li>
                    <li><a href="#page1" data-icon="home"></a></li>
                    <li><a href="#page2" data-icon="action"></a></li>
                </ul>
            </div>
        </div>

        <div data-role="main" class="ui-content">
            <h1>Action</h1>
        </div>

        <div data-role="footer">
            <h3>&copy; Kakar Nyori 2015</h3>
        </div>
    </div>