可排序的jQuery移动列表;与本地存储

Question

我有一个jQuery手机列表，它有一个滑动删除功能，并在本地存储首选项。我试图实现一个功能来重新排列列表项并将其存储在同一个数组中，请大家帮忙！ 这里是我的小提琴：http://jsfiddle.net/f18nfz/nUSUB/2/

因此函数可能是这样的（http://jsfiddle.net/maziar/P2XDc/）：

function moveUp(item) { 
    var prev = item.prev(); 
    if (prev.length == 0) 
     return; 
    prev.css('z-index', 999).css('position','relative').animate({ top: item.height() }, 250); 
    item.css('z-index', 1000).css('position', 'relative').animate({ top: '-' + prev.height() }, 300, function() { 
     prev.css('z-index', '').css('top', '').css('position', ''); 
     item.css('z-index', '').css('top', '').css('position', ''); 
     item.insertBefore(prev); 
    }); 
} 
function moveDown(item) { 
    var next = item.next(); 
    if (next.length == 0) 
     return; 
    next.css('z-index', 999).css('position', 'relative').animate({ top: '-' + item.height() }, 250); 
    item.css('z-index', 1000).css('position', 'relative').animate({ top: next.height() }, 300, function() { 
     next.css('z-index', '').css('top', '').css('position', ''); 
     item.css('z-index', '').css('top', '').css('position', ''); 
     item.insertAfter(next); 
    }); 
} 

$(".FieldContainer").sortable({ items: ".OrderingField", distance: 10 }); 
$('button').click(function() { 
    var btn = $(this); 
    var val = btn.val(); 
    if (val == 'up') 
     moveUp(btn.parents('.OrderingField')); 
    else 
     moveDown(btn.parents('.OrderingField')); 
}); 

Answer 1

这里是jQuery Mobile的一个排序拖&下拉列表中的一个很好的例子：http://jsfiddle.net/sidonaldson/pes2d/

<div data-role="page" id="page1"> 
    <div data-role="content"> 
     <ul data-role="listview" data-divider-theme="b" data-inset="true"> 
      <li data-role="list-divider" role="heading">Re-order</li> 
      <li data-theme="c">1</li> 
      <li data-theme="c">2</li> 
      <li data-theme="c">3</li> 
      <li data-theme="c">4</li> 
      <li data-theme="c">5</li> 
      <li data-theme="c">6</li> 
      <li data-theme="c">7</li> 
     </ul> 
     <a data-role="button">Submit</a> 
    </div> 
</div> 

$(document).ready(function(e) { 
    $('li').removeClass('ui-corner-bottom'); 
    $('ul') 
     .addClass('ui-corner-top') 
     .removeClass('ui-corner-all') 
     .sortable({ 
      'containment': 'parent', 
      'opacity': 0.6, 
      update: function(event, ui) { 
       alert("dropped"); 
      } 
     }); 
});