Javascript jqueryui拖放和排序

我有两个

div

容器

top\u div

bottom\u div

最初

top\u div

将为空。我正在使用jQueryUI拖放。我可以将内容从

bottom\u div

拖动到

top\u div

我的要求在上面的

top\u div

中，我需要对内容进行排序（使用可排序的jqueryui）。 排序后，当我刷新页面时，它不应该改变其位置

请帮忙，谢谢

Html代码

Sachin Tendulkar
Ab de Villiers
MS Dhoni
Ricky Ponting
Rahul

Jquery代码

$（函数（）
{
美元（“#底部#div li”）。可拖动({
公差：'配合'，
回复：“无效”，
他说:对,，
拖动：函数（事件、ui）
{
ui.helper.addClass（“可拖动”）；
},
停止：功能（事件、用户界面）
{
ui.helper.removeClass（“可拖动”）；
}
});
$（“#顶部分区”）。可下拉(
{
drop：函数（事件、用户界面）
{
如果（$（“#顶部#div li”）。长度==0）
{
$（“#top_div”）.html（“”）；
}
ui.draggable.addClass（“已删除”）；
$（“#top_div”）.append（ui.draggable）.sortable（）；
}
});
});

排序是可能的，但一旦刷新页面，您就无法按原样进行排序。@divy3993谢谢您能帮助我按照我的要求进行排序。。在jquery UI中是否有任何预定义的事件/方法，如果排序后它将保留其位置，谢谢@佩赫，非常感谢你！！