listview - jQuery Mobile 中的可排序 ListView

Question

jQuery Mobile 中是否有使 ListView 可排序的功能？

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

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

更新:我正在尝试these解决方案。 Touch Punch 可以使用拖放功能，但前提是列表不长于设备屏幕。如果某些项目超出了屏幕(您需要向下滚动才能看到它们)，那么功能就会被破坏:当您拖动项目时，它会获得错误的位置。

Answer 1

一个简单的解决方案是使用 jquery ui 可排序以及 jquery mobile ListView ，请参阅代码:

<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>

然后调用可排序函数:

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

我希望这会有所帮助...