<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>拖拽排序可保存代码</title></head>
<style>
/*先给导航写个样式，主要图演示起来好看*/
.ui-layout-north{background:#601685;width:100%;height:79px;overflow:hidden;}
.ui-layout-north .logo{overflow:hidden;_zoom:1;_float:left;height:79px;padding:10px 0 0 159px;color:#FFF;}
.ui-layout-north .logo dl{margin:15px 0 0 0;}
.ui-layout-north .logo dl dt{background-color:#CCCCCC;float:left;margin:0 2px 0 0;width:80px;height:32px;line-height:32px;text-align:center;color:#7B7A7A;cursor:pointer;}
.ui-layout-north .logo dl dt:hover{background:#ff6700;color:#fff;font-weight:bold;}
/*导航样式结束*/
/*下面是拖拽时的样式效果*/
.list .moving{
background: transparent;
color: transparent;
border: 1px dashed #00ff00;
}
</style>
<body>
<div class="ui-layout-north">
<div class="logo">
<dl id="menu" class="list">
<dt onClick="" style="background:#ff6700;color:#fff;font-weight:bold;">固定导航</dt>
<dt onClick="" draggable="true">导航一</dt>
<dt onClick="" draggable="true">导航二</dt>
<dt onClick="" draggable="true">导航三</dt>
<dt onClick="" draggable="true">导航四</dt>
</dl>
<dt id="huanyuan" style="display:none;position:absolute;left:20px;top:35px;" onClick="top_px('')">还原排序</dt>
</div>
</div>
<div id="menu2" class="list"></div>
<script type="text/javascript">
//判断一下cookie有没有
var arr = document.cookie.match(new RegExp("(^| )top_px=([^;]*)(;|$)"));//获取名字为top_px的cookie的值
if(arr[2] !== null&&arr[2].length>10){//这里加了双判断，length的值为了更可靠，也可以设置为精准的等于你的cookie字数
document.getElementById("menu").innerHTML = unescape(arr[2]);//如果cookie存在，就直接将cookie的值写入导航，unescape为解密代码，这一步是记忆拖拽后导航的关键
document.getElementById("huanyuan").style.display = "block";//显示出还原按钮
}
</script>
<script type="text/javascript">
function top_px(px){
//为浏览器写入cookie，如果你要把拖拽后的排序保存到数据库，这里的代码改成提交到后台存储就行，我这里就不再举例，可以百度搜js提交等关键词
var Days = 30*12; //cookie 将被保存一年
var exp = new Date(); //获得当前时间
exp.setTime(exp.getTime() + Days*24*60*60*1000); //换成毫秒
document.cookie = "top_px" + "="+ escape(px) + ";expires=" + exp.toGMTString();//escape为编码代码，对应上面的解密
if(px==""){//这个地方是为还原排序写的，如果是还原按钮过来的，就刷新一下页面
location.reload();
}else{//如果不是还原按钮过来的，就把还原按钮显示出来
document.getElementById("huanyuan").style.display = "block"
}
}
</script>
<script>
let list = document.querySelector('.list')
let currentLi//记忆拖拽元素
//我们用事件委托，监听 "dragstart" 事件，给拖动的元素添加类名，修改样式，这里会出现奇怪的一幕就是，拖动的样式和原来的样式同时变成了透明,这是因为跟随鼠标拖动的元素的样式在拖动的那一刻是原始元素的样式，所以也会添加"moving"， 那么在这里我们加一个异步
list.addEventListener('dragstart',(e)=>{
e.dataTransfer.effectAllowed = 'move'//拖动样式改为move
currentLi = e.target
setTimeout(()=>{
currentLi.classList.add('moving')
})
})
//接下来我们需要在拖动的过程中对列表的元素进行重新的排序。Node.insertBefore(): 方法在参考节点之前插入一个拥有指定父节点的子节点
list.addEventListener('dragenter',(e)=>{
e.preventDefault()//阻止默认事件
if(e.target === currentLi||e.target === list){//当移动到当前拖动元素，或者父元素上面不做操作
return
}
let liArray = Array.from(list.childNodes)
let currentIndex = liArray.indexOf(currentLi)//获取到拖动元素的下标
let targetindex = liArray.indexOf(e.target)//获取到目标元素的下标
if(currentIndex<targetindex){
list.insertBefore(currentLi,e.target.nextElementSibling)
}else{
list.insertBefore(currentLi,e.target)
}
})
//最后我们需要在拖拽结束将元素的moving类名移除,以及阻止拖拽到一个目标上的默认事件（否则会出现禁止）
list.addEventListener('dragover',(e)=>{
e.preventDefault()
})
list.addEventListener('dragend',(e)=>{
currentLi.classList.remove('moving');
top_px(document.getElementById("menu").innerHTML);//去执行保存拖动数据
})
</script>
</body>
</html>
