listview - jQuery Mobile 中的可排序列表视图

Question

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

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

在列表视图上应用 jQuery UI 可排序效果使其可在桌面浏览器上排序，但不能在移动设备上排序。

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

Answer 1

一个简单的解决方案是使用可排序的 jquery ui 以及 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>

我希望这有帮助...