<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>南繁协会</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow">
</head>
<style>
ul.sortable {
width: 400px;
margin: 0 auto;
}
ul.sortable h3 {
color: #333;
margin-bottom: 15px;
}
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;
color: #333;
}
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="container">
<div class="row">
<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>
</div>
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.js"></script>
<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>