<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow">
<script type="text/javascript" src="http://img.huiyiguanjia.com/CDNFile/jquery/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<style>
ul.sortable{
width: 400px;
margin:0 auto;
}
ul.sortable li {
list-style: none;
margin-bottom: 15px;
border:1px solid #333;
cursor: pointer;
}
.move {
height: 40px;
background: #fff;
line-height: 40px;
padding: 0 15px;
font-size: 14px;
}
</style>
<div class="container">
<ul class="sortable">
<h3>拖拽栏目进行排序 ↑↓</h3>
<li class="drag">
<div class="innerdiv">
<div class="innerdiv2">
<div class="move">◉ 协会动态</div>
</div>
</div>
</li>
<li class="drag">
<div class="innerdiv">
<div class="innerdiv2">
<div class="move">◉ 图片新闻</div>
</div>
</div>
</li>
<li class="drag">
<div class="innerdiv">
<div class="innerdiv2">
<div class="move">◉ 新闻资讯</div>
</div>
</div>
</li>
<li class="drag">
<div class="innerdiv">
<div class="innerdiv2">
<div class="move">◉ 行业资讯</div>
</div>
</div>
</li>
<li class="drag">
<div class="innerdiv">
<div class="innerdiv2">
<div class="move">◉ 行业服务</div>
</div>
</div>
<li class="drag">
<div class="innerdiv">
<div class="innerdiv2">
<div class="move">◉ 战略伙伴</div>
</div>
</div>
</li>
</li>
</ul>
</div>
</body>
</html>
<script>
$(function() {
var arr = '';
var sort = $( ".sortable" ).sortable({
handle: ".move",
cursor:'move',
revert: true,
stop:function(){
//记录sort后的id顺序数组
var arr = $( ".sortable" ).sortable('toArray');
console.log(arr);
//拖拽后利用localStorage记录顺序
localStorage.arr = arr;
}
});
var localSt = localStorage.arr;
//如果有localst记录则，按照这个进行排序元素
if(localSt){
var resArr = localSt.split(',');
var resUl = $('ul');
//li 数组
for(var i = 0;i < resArr.length;i++){
resUl.append($("#" + resArr[i]));
}
}
});
</script>