用js仿探探拖拽卡片的效果、飞卡片的效果，感觉挺酷，最后有美女看哦！程序员就是可以为所欲为！

╰半夏微凉° 2021-07-25 02:47 443阅读 0赞

**目录**

前两天在网上看到一个用vue写飞卡片的，觉得很有意思，我就自己想写一个，就花了点时间搞了一下，做的不好望大家多多指教。

两个主要的功能：

先看看效果：

首先要做一个盒子，然后生成几张卡片放到这个盒子里面

然后用js给卡片设置样式，有几个要注意的地方

根据拖拽的方向，来处理动画，横向就设置left属性，纵向则设置top属性。

超过一定范围就结束动画，然后将当前移动的卡片转到队列的的第一个位置，再调用reset函数，就会重新设置好卡片的位置。

代码

来几个美女看一下吧，不知合大家口味不？

给个三连吧，哈哈！

--------------------

## 前两天在网上看到一个用vue写飞卡片的，觉得很有意思，我就自己想写一个，就花了点时间搞了一下，做的不好望大家多多指教。 ##

### 两个主要的功能： ###

1.空白的地方点击最上面开始移动卡片，然后这个卡片会回到最下面，同时其他卡片往上移动。

2.拖动卡片超过多少范围会飞出去(上、下、左、右四种方向)--拖动中间的卡片也可以。

### 先看看效果： ###

![20201226113312641.gif][]

第一次用视频做图片，做的不好，哈哈！

### 首先要做一个盒子，然后生成几张卡片放到这个盒子里面 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

### 然后用js给卡片设置样式，有几个要注意的地方 ###

1.从下往上每个卡片的宽度加了12px，高度不动；

2.margin-top和margin-left每个增加了6px；

3.每个单独设置了颜色，为了好看；

4.封装了reset函数，初始的时候调用，当移动动画完成后，再次调用，可以重新排列好盒子（只需要把队列中卡片的顺序调换既即可）。

//重新设置卡片的样式
    		function reset(){
    			for(var i=0;i<boxStack.length;i++){
    				//对每一张卡片设置样式，每张稍微有点不一样
    				var obj = boxStack[i];
    				 	obj.style.left=left+'px';
    				 	obj.style.top=top+'px';
    					obj.style.marginLeft=marginLeft-i*6+'px';
    					obj.style.marginTop=marginTop-i*6+'px';
    					obj.style.zIndex=zIndex+i;
    					obj.style.width=(width+i*12)+'px';
    					obj.style.height=height+'px';
    					
    					//每个卡片设置不同的颜色
    					switch (obj.id) {
    						case 'card1':
    							obj.style.background = 'aliceblue';
    							break;
    						case 'card2':
    							obj.style.background = 'skyblue';
    							break;
    						case 'card3':
    							obj.style.background = 'powderblue';
    							break;
    						case 'card4':
    							obj.style.background = 'steelblue';
    							break;
    						
    					}
    			}
    		}

看一下盒子初始化好的模样，还行，不算太丑，哈哈

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1][]

### 根据拖拽的方向，来处理动画，横向就设置left属性，纵向则设置top属性。 ###

//针对上下左右有不同的设置
    					if(direction=='left'){
    						distance -= speed;
    						dire='left';
    						if(distance<=1){
    							endFlag=true;
    						}
    					}else if(direction=='top'){
    						distance -= speed;
    						dire='top';
    						if(distance<=1){
    							endFlag=true;
    						}
    					}else if(direction=='bottom'){
    						distance += speed;
    						dire='top';
    						if(distance>=90){
    							endFlag=true;
    						}
    					}else{
    						distance += speed;
    						dire='left';
    						//超过一定范围就调整卡片
    						if(distance>=90){
    							endFlag=true;
    						}
    					}
    
    
                        obj.style[dire]=distance +'%';

### 超过一定范围就结束动画，然后将当前移动的卡片转到队列的的第一个位置，再调用reset函数，就会重新设置好卡片的位置。 ###

if(endFlag){
    						//清除定时器
    						clearInterval(obj.timer);
    						obj.timer=null;
    						//把当前元素 从盒子队列中移动到最前面
    						moveFlag=false;
    						
    						var index = boxStack.findIndex(function(item){
    							return obj.id==item.id;
    						})
    						
    						var cur = boxStack.splice(index,1);
    						
    						boxStack.unshift(cur[0]);//添加到队列最前面
    						
    						setTimeout(function(){
    							reset();//重新部署盒子
    						},50)//设置重写设置盒子样式的延时，看起来更舒服	
    						return ;
    					}

至于拖拽的我就不多说了，我这个好像也还不是很好，拖拽有时候感觉会有点卡顿，后面再完善吧。

### 代码 ###

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=GBK">
            <style>
            *{
            	margin:0;padding:0;
            }
    		.card{
    			 position: absolute;
    			 border:1px solid black;
    			 border-radius:8px;
    		}
            </style>
            </head>
            <body>
           		<div class="box" id="div_box" >
           		</div>
            </body>
            
    <script>
    //1.空白的地方点击最上面开始移动卡片
    //2.拖动卡片超过多少范围会飞出去(上、下、左、右四种方向)--拖中间的也可以
    
    	(function(){
    		var div_box = document.getElementById("div_box");// 获取盒子
    			div_box.addEventListener('click',tranBox);
    			
    		var boxStack=[];//用来存储卡片dom对象的
    	
    		//创建卡片
    		function initCard(){
    			var screenWidth = window.screen.availWidth-20;
    			var screenHeight = window.screen.availHeight-110;
    			div_box.style.width=screenWidth+'px';
    			div_box.style.height=screenHeight+'px';
    			
    			var card_num=4;
    			for(var i=1;i<=card_num;i++){//生成卡片
    				var div = document.createElement("div");
    					div.id="card"+i;
    					div.className="card";
    					div.addEventListener('mousedown',drag);	
    					/*var img = document.createElement("img");
    						img.src="images/"+i+".jpg";
    						div.appendChild(img);*/
    					
    					div_box.appendChild(div);
    					
    					boxStack.push(div);//一个个的推入到盒子队列
    			}
    			//第一次设置卡片样式
    			reset();
    		}
    		
    		var left=600,top=160,marginLeft=marginTop=24,zIndex=2,width=120,height=200;
    		//重新设置卡片的样式
    		function reset(){
    			for(var i=0;i<boxStack.length;i++){
    				//对每一张卡片设置样式，每张稍微有点不一样
    				var obj = boxStack[i];
    				 	obj.style.left=left+'px';
    				 	obj.style.top=top+'px';
    					obj.style.marginLeft=marginLeft-i*6+'px';
    					obj.style.marginTop=marginTop-i*6+'px';
    					obj.style.zIndex=zIndex+i;
    					obj.style.width=(width+i*12)+'px';
    					obj.style.height=height+'px';
    					
    					//obj.children[0].style.width=(width+i*12)+'px';
    					//obj.children[0].style.height=height+'px';
    					
    					//每个卡片设置不同的颜色
    					switch (obj.id) {
    						case 'card1':
    							obj.style.background = 'aliceblue';
    							break;
    						case 'card2':
    							obj.style.background = 'skyblue';
    							break;
    						case 'card3':
    							obj.style.background = 'powderblue';
    							break;
    						case 'card4':
    							obj.style.background = 'steelblue';
    							break;
    						
    					}
    			}
    		}
    		//拖动卡片的事件函数
    		function tran(e){
    			var e = e || window.event;
    			var target = e.target || e.srcElement;
    			console.log(target.id);
    			if(target.id){
    				//拖动当前的卡片
    			 	move_tran(target);
    			}
    		}
    		//点击box的事件函数
    		function tranBox(e){
    			var e = e || window.event;
    			var target = e.target || e.srcElement;
    			if(target.id){
    				if(target.id==='div_box'){//点击div_box从最上面开始飞
    					move_tran(boxStack[boxStack.length-1]);
    				}
    			}
    		}
    		
    		var moveFlag=false;//正在移动表示，有卡片正在移动，move 函数将不会被调用
    		function move_tran(obj,direction,step){
    			if(moveFlag) return ;//表示有卡片正在移动，move 函数将不会被调用
    			if(obj.timer) return ;//避免重复点击
    			moveFlag=true;//设置当前正在移动
    			step=step||0;
    			
    			var cb = (function (){//回调函数
    				var speed=5;
    				var screenTotal=0;
    				var distance = 0;
    				var endFlag=false;
    				function init(){//处理初始步距
    					if(direction=='top'||direction=='bottom'){
    						speed=10;
    						screenTotal = window.screen.availHeight;
    						distance = Math.ceil((top+step)/screenTotal*100);
    					}else{
    						screenTotal = window.screen.availWidth;
    						distance = Math.ceil((left+step)/screenTotal*100);
    					}
    				}
    				
    				init();
    				
    				return function(){
    					//针对上下左右有不同的设置
    					if(direction=='left'){
    						distance -= speed;
    						dire='left';
    						if(distance<=1){
    							endFlag=true;
    						}
    					}else if(direction=='top'){
    						distance -= speed;
    						dire='top';
    						if(distance<=1){
    							endFlag=true;
    						}
    					}else if(direction=='bottom'){
    						distance += speed;
    						dire='top';
    						if(distance>=90){
    							endFlag=true;
    						}
    					}else{
    						distance += speed;
    						dire='left';
    						//超过一定范围就调整卡片
    						if(distance>=90){
    							endFlag=true;
    						}
    					}
    					
    					if(endFlag){
    						//清除定时器
    						clearInterval(obj.timer);
    						obj.timer=null;
    						//把当前元素 从盒子队列中移动到最前面
    						moveFlag=false;
    						
    						var index = boxStack.findIndex(function(item){
    							return obj.id==item.id;
    						})
    						
    						var cur = boxStack.splice(index,1);
    						
    						boxStack.unshift(cur[0]);//添加到队列最前面
    						
    						setTimeout(function(){
    							reset();//重新部署盒子
    						},50)//设置重写设置盒子样式的延时，看起来更舒服	
    						return ;
    					}
    					console.log("distance===",distance)
    					//设置left或者top作移动
    					obj.style[dire]=distance +'%';
    				}
    			})();
    			
    			
    			obj.timer = setInterval(cb,35);
    			
    		}
    
    
    		/* 鼠标拖动 */
    	 	/*
             * 分析：
             * 获取鼠标实时移动的坐标；m_move_x,m_move_y
             * 鼠标按下时的坐标；m_down_x,m_down_y
             * div的坐标；dx,dy
             * div的新坐标；ndx,ndy
             * 最大边界maxX,maxY
             * 鼠标相对位移 nx,ny
             */
     
            var isDown = false;//记录鼠标状态
            var recover = false;
            var move_div;//要操作的div对象
            var m_move_x,m_move_y,m_down_x,m_down_y,dx,dy,ndx,ndy,maxX,maxY,nx=0,ny=0;
     
            //鼠标按下
            function drag(e){
            	var e = e || event;
                move_div = this;
                isDown = true;
     
                //获取鼠标按下时坐标
                m_down_x = e.clientX;
                m_down_y = e.clientY;
                
                //实时更新div的坐标
                dx = move_div.offsetLeft;
                dy = move_div.offsetTop;
            }
            //鼠标移动
            document.onmousemove=function move(e){
    			 var e = e || event;
                //鼠标按下时移动才触发
                if(isDown && move_div){
    	            //获取鼠标移动实时坐标
    	            m_move_x = e.clientX;
    	            m_move_y = e.clientY;
    	           
    	            nx = m_move_x-m_down_x;
    	            ny = m_move_y-m_down_y;
    	            
    	            if(Math.abs(nx)>=200){
    	          		move_tran(move_div,nx>0?'right':'left',nx);
    	          		isDown = false;
                		move_div= null;
    	            	return ;
    	            }else if(Math.abs(ny)>=100){
    	            	move_tran(move_div,ny>0?'bottom':'top',ny);
    	          		isDown = false;
                		move_div= null;
    	            	return ;
    	            }
    	         
    	            var id = move_div.id.substr(4);
    	            ndx = dx+nx-(id-1)*4;
    	            ndy = dy+ny-(id-1)*4;
    	            
    				//设置拖动的边界
    				maxX = window.screen.availWidth-20-move_div.offsetWidth;
    				maxY = window.screen.availHeight-110-move_div.offsetHeight;
    				if(ndx<=0){
    					ndx=1;
    				}
    				if(ndy<=0){
    					ndy=1;
    				}
    				if(ndx>=maxX){
    					ndx=maxX;
    				}
    				if(ndy>=maxY){
    					ndy=maxY;
    				}
    				
                    //把新div坐标值赋给div对象
                    move_div.style.left = ndx+"px";
                    move_div.style.top = ndy+"px";
                }
     
            }
     
            //鼠标释放
            document.onmouseup=function up(e){
                var e = e || event;
                //获取鼠标移动实时坐标
                m_move_x = e.clientX;
                m_move_y = e.clientY;
               
                nx = m_move_x-m_down_x;
                ny = m_move_y-m_down_y;
    	            
    	        if(nx<300){
              		reset();
                }
                isDown = false;
                move_div= null;
    		 }
    
    		//初始化
    		initCard();
    		
    	})()
    
    </script>
    </html>

### 来几个美女看一下吧，不知合大家口味不？ ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 4][]

动图就没搞了，这个对动画要求高，弄出来效果不好，我还不太会弄。

### 给个三连吧，哈哈！ ###

### **关注下方公众号，有更多资料、实例代码、面试技巧奉上！** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 5][]

[20201226113312641.gif]: /images/20210724/49e1d5a85cc94a13ae42aeca2e4a6b4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/1b94c3766141497eb1697dfba8d63912.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1]: /images/20210724/b8a68d5cc9e14639adfb4f370240eb26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 2]: /images/20210724/1d5f8ceb1f314f02afb0e5f3429060e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 3]: /images/20210724/21160eb8db6243dda8570f217aadded5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 4]: /images/20210724/549381a0e7534dae84e5f8b6c0b09843.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 5]: /images/20210724/34b824373d6c451b99619f2ff8643b5b.png