jQuery Mobile中的可排序列表視圖

jQuery Mobile中是否有使用listview排序的功能？jQuery Mobile中的可排序列表視圖

通過排序，我的意思是用戶可以通過拖動來重新排列列表中的元素，就像在iPhone上一樣。

在列表視圖上應用jQuery UI可排序效果可在桌面瀏覽器上排序，但不能在移動設備上排序。我想嘗試these解決方案。 Touch Punch可以使拖放功能正常工作，但只有當列表不再長的時候纔是設備屏幕。如果某些項目不在屏幕上（需要向下滾動才能看到它們），則功能會被破壞：當您拖動某個項目時，它會出現錯誤的位置。

來源

2012-05-11 WallTearer

你有沒有遇到過這種情況？我有和你在更新中提到的完全相同的問題 – JonWells

大約一年前，我不記得我做了什麼。我想我只是添加了一個按鈕來向上/向下移動元素。 – WallTearer

感謝您的回覆，這幾乎正是我所訴諸的。 – JonWells

一個簡單的解決方案是使用jQuery用戶界面與jQuery Mobile的列表視圖以及可排序，查看代碼：

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

我希望這有助於...

來源

2012-08-21 03:59:25

不適合我。 –

這有效......直到你看到有一天混合了JQuery UI和JQuery Mobile的所有奇怪錯誤。我強烈推薦！ –

這不適用於IE10或IE11，但它在兼容模式下工作。 –

jQuery Mobile中的可排序列表視圖

回答

相關問題