Javascript 可排序jQuery移动列表；使用本地存储

我有一个jQuery移动列表，它有一个滑动删除功能，并在本地存储首选项。我正在尝试实现一个功能来重新排列列表项并将其存储在同一数组中，请帮助！ 这是我的小提琴：

所以函数可以是类似（）的：

---

下面是一个使用jQuery Mobile的可排序拖放列表的好例子：

重新订购
1
2
3
4
5
6
7

提交
$（文档）.ready（函数（e）{
$（'li'）.removeClass（'ui-corner-bottom'）；
$（'ul'）
.addClass（'ui-corner-top'）
.removeClass（'ui-corner-all'）
.可排序({
“包含”：“父项”，
“不透明度”：0.6，
更新：功能（事件、用户界面）{
警惕（“放弃”）；
}
});
});

由于我的列表很长，您需要滚动浏览它，我想要按钮，或者如果我可以在每个可拖动的列表项上只显示一个图标或按钮，那么可以使用。。。

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'));
});

<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");
            }
        });
});