在 Phonegap 中通过拖放使 jQuery Mobile 列表视图可排序

Posted 2023-05-08

【中文标题】在 Phonegap 中通过拖放使 jQuery Mobile 列表视图可排序

【英文标题】：Make a jQuery Mobile listview Sortable by Drag & Drop in Phonegap

【发布时间】：2013-10-01 17:13:29

【问题描述】：

这个网站上有一些问题和其他类似的问题，但没有一个适用于我在 Phonegap 2.9、jQuery 2.0.3 和 jQM 1.3.2 上的实现。

普遍的共识是，您需要结合 jQuery UI 和一个名为 jQuery UI Touch Punch 的小型库来“欺骗”jQuery UI 的鼠标事件以获取触摸事件。您可以在此博客上看到这种方法：http://forresst.github.io/2012/06/22/Make-a-list-jQuery-Mobile-sortable-by-drag-and-drop/。基本上，您只需包含 jQuery UI 和 Touch Punch 库并使用以下语法：

<script>
$(document).bind('pageinit', function() 
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
<!-- Refresh list to the end of sort to have a correct display -->
$( "#sortable" ).bind( "sortstop", function(event, ui) 
  $('#sortable').listview('refresh');
);
);
</script>

但是，唉，当我在 Phonegap Build 应用程序中使用它时，这不起作用。我可以清楚地拖放列表视图<li>，但列表视图永远不会刷新以实际完成拖放。令人抓狂的是http://forresst.github.io/demos/sortable/en/index.html 有一个演示，它在我的测试移动浏览器上运行良好。所有这些，但嵌入到 Phonegap 时它不起作用。

我通过反复试验发现，如果页面上有一个 RESET 按钮，当我按下 RESET 按钮时，列表视图项就会卡入到位。因此，从逻辑上讲，我尝试使用.click(); 调用来模拟这一点，但这些都没有奏效。我已经搜索了互联网，并尽我所能跟踪 phonegap 应用程序中的堆栈跟踪，但我还没有找到解决方案。此外，我希望不必将 jQuery UI 合并到我的 jQuery Mobile 应用程序中。

有没有人为当前版本的 Phonegap 和 jQuery Mobile 找到一个可行的解决方案，供用户拖放可排序列表？

【问题讨论】：

我也有同样的问题。其他帖子中提到的演示站点有效，但部署到 phonegap 时无效。我正在尝试创建一个代表故事的图像列表，并让最终用户移动它们以创建他们选择的故事顺序。你找到解决办法了吗？

【参考方案1】：

我发现，总的来说，在构建 Cordova/Phonegap 环境时减少对 jquery 可排序功能的依赖是值得的。 https://rubaxa.github.io/Sortable/

在移动应用中对 html 表格元素进行排序非常有用

【讨论】：

显然，这里有人对 jquery 感到非常自豪，降级了一个建议替代库的答案