jQuery Mobile中的可排序列表视图

Question

jQuery Mobile中是否有用于使列表视图可排序的功能？

通过排序，我的意思是用户可以通过拖动来重新排序列表中的元素，就像在iPhone上一样。

在listview上应用jQuery UI可排序效果使其可以在桌面浏览器上进行排序，但不能在移动设备上进行排序。

更新：我正在尝试these解决方案。 Touch Punch使拖放功能正常工作，但仅当列表不再长于设备屏幕时。如果某些项目不在屏幕上（您需要向下滚动才能看到它们），那么功能就会被破坏：当您拖动项目时，它会得到错误的位置。

Answer 1

一个简单的解决方案是使用jquery ui sortable以及jquery移动列表视图，请参阅代码：

<ul data-role="listview" class="sortable">
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

并确保将jqueryui库添加到

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

然后调用sortable函数：

<script>
        $(function() {
                $( ".sortable" ).sortable();
                $( ".sortable" ).disableSelection();
        });
</script>

我希望这有帮助...