仿QQ浏览器新标签页上面拖拽排序的demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;list-style:none;}
.main{width:800px;background:#eee;height:260px;margin:50px auto;}
.main li div{height:100px;}
.main li{width:200px;float:left;}
.main li h2{height:30px;width:100%;line-height:30px;font-size:0;text-align: right;}
.main li:nth-child(1){background:red;}
.main li:nth-child(2){background:blue;}
.main li:nth-child(3){background:yellow;}
.main li:nth-child(4){background:gray;}
.main li:nth-child(5){background:rgb(123,0,0);}
.main li:nth-child(6){background:rgb(0,123,0);}
.main li:nth-child(7){background:rgb(0,0,123);}
.main li:nth-child(8){background:pink;}
.main li:nth-child(9){background:black;}
.main li:nth-child(10){background:gold;}
.main li:nth-child(11){background:#999;}
.main li:nth-child(12){background:#333;}
.xia,.shang{width:50px;margin-right:20px;vertical-align:middle;}
.on{-webkit-transition:all .3s;transition:all .3s;}
.drag{z-index:999;pointer-events:none;}
h2.hideXia .xia{display:none;}
h2.hideShang .shang{display:none;}
</style>
</head>
<body>
<div class="main">
<ul>
<li data-pos='1'>
<h2><button class="xia">向后↓</button><button class="shang">向前↑</button></h2>
<div></div>
</li>
<li data-pos='2'>
<h2><button class="xia">向后↓</button><button class="shang">向前↑</button></h2>
<div></div>
</li>
<li data-pos='3'>
<h2><button class="xia">向后↓</button><button class="shang">向前↑</button></h2>
<div></div>
</li>
<li data-pos='4'>
<h2><button class="xia">向后↓</button><button class="shang">向前↑</button></h2>
<div></div>
</li>
<li data-pos='5'>
<h2><button class="xia">向后↓</button><button class="shang">向前↑</button></h2>
<div></div>
</li>
<li data-pos='6'>
<h2><button class="xia">向后↓</button><button class="shang">向前↑</button></h2>
<div></div>
</li>
<li data-pos='7'>
<h2><button class="xia">向后↓</button><button class="shang">向前↑</button></h2>
<div></div>
</li>
<li data-pos='8'>
<h2><button class="xia">向后↓</button><button class="shang">向前↑</button></h2>
<div></div>
</li>
<li data-pos='9'>
<h2><button class="xia">向后↓</button><button class="shang">向前↑</button></h2>
<div></div>
</li>
<li data-pos='10'>
<h2><button class="xia">向后↓</button><button class="shang">向前↑</button></h2>
<div></div>
</li>
<li data-pos='11'>
<h2><button class="xia">向后↓</button><button class="shang">向前↑</button></h2>
<div></div>
</li>
<li data-pos='12'>
<h2><button class="xia">向后↓</button><button class="shang">向前↑</button></h2>
<div></div>
</li>
</ul>
</div>
<script>
function $(el,one){
if(one){
return document.querySelectorAll(el);
}else{
return document.querySelector(el);
}
}
function pos(el){
return el.getBoundingClientRect();
}
function changeAB(el){
var l,t;
var arr=[];
for(var i=el.length-1;i>=0;i--){
l=pos(el[i]).left;
t=pos(el[i]).top;
arr.unshift('left:'+l+'px;top:'+t+'px;');
el[i].style.cssText='position:absolute;left:'+l+'px;top:'+t+'px;';
}
return arr;
}
function updataNum(el){
var arr=[];
for(var i=0;i<el.length;i++){
arr.push(el[i].getAttribute('data-pos'));
}
return arr;
}
function updataCeng(num,str){
var selfNum=posNum[num];
if(str=='xia'){
var otherNum=++selfNum;
for(var i=0;i<posNum.length;i++){
if(posNum[i] == otherNum){
--posNum[i];
break;
}
}
++posNum[num];
}else if(str=='shang'){
var otherNum=--selfNum;
for(var i=0;i<posNum.length;i++){
if(posNum[i] == otherNum){
++posNum[i];
break;
}
}
--posNum[num];
}
}
function updataButton(){
changeClass($('.main li h2',true),'');
for(var i=0;i<posNum.length;i++){
if(posNum[i] == 1){
$('.main li:nth-child('+(i+1)+') h2').classList.add('hideShang');
}else if(posNum[i] == $('.main li',true).length){
$('.main li:nth-child('+(i+1)+') h2').classList.add('hideXia');
}
}
}
function changeClass(el,cl){
Array.prototype.forEach.call(el,function(ele){
ele.className=cl;
})
}
function updateView(el){
var n= el ? el.index : -1;
for(var i=0;i<$('.main li',true).length;i++){
if(i == n)continue;
$('.main li',true)[i].style.cssText='position:absolute;'+posArr[posNum[i]-1];
}
}
function changeSort(el,str){
var pLi=el.parentElement.parentElement;
//更新层
updataCeng(pLi.index,str);
//更新按钮
updataButton();
//更新视图
updateView();
}
function dragSort(n,m){ //n为点击的, m为移入的
var nC=parseInt(posNum[n]);
var mC=parseInt(posNum[m]);
if(mC > nC){
for(var i=0;i<posNum.length;i++){
console.log(posNum[i])
if(posNum[i] <= mC && posNum[i] >nC){
--posNum[i];
}
}
posNum[n]=posNum[m]+1;
}else if(mC < nC){
for(var i=0;i<posNum.length;i++){
if(posNum[i] >= mC && posNum[i] <nC){
++posNum[i];
}
}
posNum[n]=posNum[m]-1;
}
console.log(posNum);
}
var posArr=changeAB($('.main li',true)); //位置
var posNum=updataNum($('.main li',true)); //层
var flag=false;
var num=1;
updataButton();
changeClass($('.main li',true),'on');
for(var i=0;i<$('.main li h2',true).length;i++){
$('.main li',true)[i].index=i;
$('.main li:nth-child('+(i+1)+') h2 .xia').onclick=function(e){
var self=this;
changeSort(this,'xia');
e.stopPropagation();
return false;
}
$('.main li:nth-child('+(i+1)+') h2 .shang').onclick=function(e){
var self=this;
changeSort(this,'shang');
e.stopPropagation();
return false;
}
//清楚按钮冒泡事件
$('.main li:nth-child('+(i+1)+') h2 .shang').onmousedown=$('.main li:nth-child('+(i+1)+') h2 .xia').onmousedown=function(e){
e.stopPropagation();
return false;
}
$('.main li',true)[i].onmousedown=function(e){
var self=this;
var t;
this.className='drag';
flag=true;
var mouseX=e.clientX-pos(this).left;
var mouseY=e.clientY-pos(this).top;
document.onmousemove=function(e){
if(flag){
var x=e.clientX-mouseX;
var y=e.clientY-mouseY;
self.style.top=y+'px';
self.style.left=x+'px';
}
return false;
}
document.onmouseup=function(){
flag=false;
document.onmousemove=null;
self.className='on';
updateView();
self.style.zIndex=1;
}
Array.prototype.forEach.call($('.main li',true),function(el,index){
el.onmouseover=function(){
if(flag){
var ss=this;
clearInterval(t);
t=setTimeout(function(){
dragSort(self.index,ss.index);
updataButton();
updateView(self);
}, 300)
}
}
el.onmouseout=function(){
clearInterval(t);
}
})
}
}
</script>
</body>
</html>
