实现多个div拖拽移动，交换位置功能，代码复制可运行，有交换特效

其他 2019-03-27 10:41:22 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m0_38084879/article/details/77336931

废话不多说，直接上代码：

drag.css

	
	#moveBar1{ 
		position: absolute; 
		left:2px;
		top:2px;
		width: 250px; 
		height: 300px; 
		background: #666; 
		border: solid 0px #000; 
		opacity: 0.6;
		z-index:1;
	}
	#moveBar2{ 
		position: absolute; 
		left:2px;
		top:310px;
		width: 250px; 
		height: 300px; 
		background: #666; 
		border: solid 0px #000; 
		opacity: 0.6;
		z-index:1;
	}
	#moveBar3{ 
		position: absolute;
		left:254px;
		top:2px; 
		width: 250px; 
		height: 300px; 
		background: #666; 
		border: solid 0px #000; 
		opacity: 0.6;
		z-index:1;
	}
	#moveBar4{ 
		position: absolute;
		left:254px;
		top:310px; 
		width: 250px; 
		height: 300px; 
		background: #666; 
		border: solid 0px #000; 
		opacity: 0.6;
		z-index:1;
	}
	#moveBar5{ 
		position: absolute; 
		left:506px;
		top:2px; 
		width: 250px; 
		height: 300px; 
		background: #666; 
		border: solid 0px #000; 
		opacity: 0.6;
		z-index:1;
	}
	#moveBar6{ 
		position: absolute; 
		left:506px;
		top:310px; 
		width: 250px; 
		height: 300px; 
		background: #666; 
		border: solid 0px #000; 
		opacity: 0.6;
		z-index:1;
	}
	#moveBar7{ 
		position: absolute; 
		left:758px;
		top:2px;
		width: 250px; 
		height: 300px; 
		background: #666; 
		border: solid 0px #000; 
		opacity: 0.6;
		z-index:1;
	}
	#moveBar8{ 
		position: absolute;
		left:758px;
		top:310px;  
		width: 250px; 
		height: 300px; 
		background: #666; 
		border: solid 0px #000; 
		opacity: 0.6;
		z-index:1;
	} 
	#banner1,#banner2,#banner3,#banner4,#banner5,#banner6,#banner7,#banner8{ 
		background: #666; 
		cursor: move; 
	}
drag.js 

$(function () { 
	var oleft,uleft,left=[0,0,0,0,0,0,0,0,0,0,0];//原始位置，鼠标松开位置，交换位置,left距离
	var otop,utop,top=[0,0,0,0,0,0,0,0,0,0,0];////原始位置，鼠标松开位置，交换位置,top距离
	var keen=200;//交换位置灵敏度
	var i=0,j=0;
	$('#banner1').mousedown( 
		function (event) { 
			j++;
			var isMove = true; 
			var abs_x = event.pageX - $('#moveBar1').offset().left; 
			var abs_y = event.pageY - $('#moveBar1').offset().top;
			oleft=$('#moveBar1').offset().left;//鼠标按下时，div距离左边的像素
			otop=$('#moveBar1').offset().top;//鼠标按下时，距离上边的像素
			for(var k=0;k<8;k++){
				$("#moveBar"+(k+1)).css({"z-index":1});
			}
			$("#moveBar1").css({"z-index":2});
			$(document).mousemove(function (event) { 
					if (isMove) { 
						var obj = $('#moveBar1'); 
						obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y}); 
					} 
				} 
			);$(document).mouseup(
				function () { 
					i++;
					isMove = false;
					if(i==j){
						uleft=$('#moveBar1').offset().left;
						utop=$('#moveBar1').offset().top;
						for(var k=0;k<8;k++){
							left[k]=$("#moveBar"+(k+1)).offset().left;
							top[k]=$("#moveBar"+(k+1)).offset().top;
						}
						for(var k=0;k<8;k++){
							if(k!=0){
								if(0<=uleft-left[k]&&uleft-left[k]<=keen&&0<=utop-top[k]&&utop-top[k]<=keen){
									$("#moveBar1").animate({"left":left[k],"top":top[k]});
									$("#moveBar"+(k+1)).animate({"left":oleft,"top":otop});
									break;
								}
							}else{
								continue;
							}
						}
						
					}
				}
				
			); 
			i=0;
		} 
		
	);
	
	$('#banner2').mousedown( 
		function (event) { 
			j++;
			var isMove = true; 
			var abs_x = event.pageX - $('#moveBar2').offset().left; 
			var abs_y = event.pageY - $('#moveBar2').offset().top;
			oleft=$('#moveBar2').offset().left;//鼠标按下时，div距离左边的像素
			otop=$('#moveBar2').offset().top;//鼠标按下时，距离上边的像素
			for(var k=0;k<8;k++){
				$("#moveBar"+(k+1)).css({"z-index":1});
			}
			$("#moveBar2").css({"z-index":2});
			$(document).mousemove(function (event) { 
					if (isMove) { 
						var obj = $('#moveBar2'); 
						obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y}); 
					} 
				} 
			);$(document).mouseup(
				function () { 
					i++;
					isMove = false;
					if(i==j){
						uleft=$('#moveBar2').offset().left;
						utop=$('#moveBar2').offset().top;
						for(var k=0;k<8;k++){
							left[k]=$("#moveBar"+(k+1)).offset().left;
							top[k]=$("#moveBar"+(k+1)).offset().top;
						}
						for(var k=0;k<8;k++){
							if(k!=1){
								if(0<=uleft-left[k]&&uleft-left[k]<=keen&&0<=utop-top[k]&&utop-top[k]<=keen){
									$("#moveBar2").animate({"left":left[k],"top":top[k]});
									$("#moveBar"+(k+1)).animate({"left":oleft,"top":otop});
									break;
								}
							}else{
								continue;
							}
						}
						
					}
				}
				
			); 
			i=0;
		} 
		
	);
	
	$('#banner3').mousedown( 
		function (event) { 
			j++;
			var isMove = true; 
			var abs_x = event.pageX - $('#moveBar3').offset().left; 
			var abs_y = event.pageY - $('#moveBar3').offset().top;
			oleft=$('#moveBar3').offset().left;//鼠标按下时，div距离左边的像素
			otop=$('#moveBar3').offset().top;//鼠标按下时，距离上边的像素
			for(var k=0;k<8;k++){
				$("#moveBar"+(k+1)).css({"z-index":1});
			}
			$("#moveBar3").css({"z-index":2});
			$(document).mousemove(function (event) { 
					if (isMove) { 
						var obj = $('#moveBar3'); 
						obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y}); 
					} 
				} 
			);$(document).mouseup(
				function () { 
					i++;
					isMove = false;
					if(i==j){
						uleft=$('#moveBar3').offset().left;
						utop=$('#moveBar3').offset().top;
						for(var k=0;k<8;k++){
							left[k]=$("#moveBar"+(k+1)).offset().left;
							top[k]=$("#moveBar"+(k+1)).offset().top;
						}
						for(var k=0;k<8;k++){
							if(k!=2){
								if(0<=uleft-left[k]&&uleft-left[k]<=keen&&0<=utop-top[k]&&utop-top[k]<=keen){
									$("#moveBar3").animate({"left":left[k],"top":top[k]});
									$("#moveBar"+(k+1)).animate({"left":oleft,"top":otop});
									break;
								}
							}else{
								continue;
							}
						}
						
					}
				}
				
			); 
			i=0;
		} 
		
	);
	
	$('#banner4').mousedown( 
		function (event) { 
			j++;
			var isMove = true; 
			var abs_x = event.pageX - $('#moveBar4').offset().left; 
			var abs_y = event.pageY - $('#moveBar4').offset().top;
			oleft=$('#moveBar4').offset().left;//鼠标按下时，div距离左边的像素
			otop=$('#moveBar4').offset().top;//鼠标按下时，距离上边的像素
			for(var k=0;k<8;k++){
				$("#moveBar"+(k+1)).css({"z-index":1});
			}
			$("#moveBar4").css({"z-index":2});
			$(document).mousemove(function (event) { 
					if (isMove) { 
						var obj = $('#moveBar4'); 
						obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y}); 
					} 
				} 
			);$(document).mouseup(
				function () { 
					i++;
					isMove = false;
					if(i==j){
						uleft=$('#moveBar4').offset().left;
						utop=$('#moveBar4').offset().top;
						for(var k=0;k<8;k++){
							left[k]=$("#moveBar"+(k+1)).offset().left;
							top[k]=$("#moveBar"+(k+1)).offset().top;
						}
						for(var k=0;k<8;k++){
							if(k!=3){
								if(0<=uleft-left[k]&&uleft-left[k]<=keen&&0<=utop-top[k]&&utop-top[k]<=keen){
									$("#moveBar4").animate({"left":left[k],"top":top[k]});
									$("#moveBar"+(k+1)).animate({"left":oleft,"top":otop});
									break;
								}
							}else{
								continue;
							}
						}
						
					}
				}
				
			); 
			i=0;
		} 
		
	);
	
	$('#banner5').mousedown( 
		function (event) { 
			j++;
			var isMove = true; 
			var abs_x = event.pageX - $('#moveBar5').offset().left; 
			var abs_y = event.pageY - $('#moveBar5').offset().top;
			oleft=$('#moveBar5').offset().left;//鼠标按下时，div距离左边的像素
			otop=$('#moveBar5').offset().top;//鼠标按下时，距离上边的像素
			for(var k=0;k<8;k++){
				$("#moveBar"+(k+1)).css({"z-index":1});
			}
			$("#moveBar5").css({"z-index":2});
			$(document).mousemove(function (event) { 
					if (isMove) { 
						var obj = $('#moveBar5'); 
						obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y}); 
					} 
				} 
			);$(document).mouseup(
				function () { 
					i++;
					isMove = false;
					if(i==j){
						uleft=$('#moveBar5').offset().left;
						utop=$('#moveBar5').offset().top;
						for(var k=0;k<8;k++){
							left[k]=$("#moveBar"+(k+1)).offset().left;
							top[k]=$("#moveBar"+(k+1)).offset().top;
						}
						for(var k=0;k<8;k++){
							if(k!=4){
								if(0<=uleft-left[k]&&uleft-left[k]<=keen&&0<=utop-top[k]&&utop-top[k]<=keen){
									$("#moveBar5").animate({"left":left[k],"top":top[k]});
									$("#moveBar"+(k+1)).animate({"left":oleft,"top":otop});
									break;
								}
							}else{
								continue;
							}
						}
						
					}
				}
				
			); 
			i=0;
		} 
		
	);
	
	$('#banner6').mousedown( 
		function (event) { 
			j++;
			var isMove = true; 
			var abs_x = event.pageX - $('#moveBar6').offset().left; 
			var abs_y = event.pageY - $('#moveBar6').offset().top;
			oleft=$('#moveBar6').offset().left;//鼠标按下时，div距离左边的像素
			otop=$('#moveBar6').offset().top;//鼠标按下时，距离上边的像素
			for(var k=0;k<8;k++){
				$("#moveBar"+(k+1)).css({"z-index":1});
			}
			$("#moveBar6").css({"z-index":2});
			$(document).mousemove(function (event) { 
					if (isMove) { 
						var obj = $('#moveBar6'); 
						obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y}); 
					} 
				} 
			);$(document).mouseup(
				function () { 
					i++;
					isMove = false;
					if(i==j){
						uleft=$('#moveBar6').offset().left;
						utop=$('#moveBar6').offset().top;
						for(var k=0;k<8;k++){
							left[k]=$("#moveBar"+(k+1)).offset().left;
							top[k]=$("#moveBar"+(k+1)).offset().top;
						}
						for(var k=0;k<8;k++){
							if(k!=5){
								if(0<=uleft-left[k]&&uleft-left[k]<=keen&&0<=utop-top[k]&&utop-top[k]<=keen){
									$("#moveBar6").animate({"left":left[k],"top":top[k]});
									$("#moveBar"+(k+1)).animate({"left":oleft,"top":otop});
									break;
								}
							}else{
								continue;
							}
						}
						
					}
				}
				
			); 
			i=0;
		} 
		
	);
	
	$('#banner7').mousedown( 
		function (event) { 
			j++;
			var isMove = true; 
			var abs_x = event.pageX - $('#moveBar7').offset().left; 
			var abs_y = event.pageY - $('#moveBar7').offset().top;
			oleft=$('#moveBar7').offset().left;//鼠标按下时，div距离左边的像素
			otop=$('#moveBar7').offset().top;//鼠标按下时，距离上边的像素
			for(var k=0;k<8;k++){
				$("#moveBar"+(k+1)).css({"z-index":1});
			}
			$("#moveBar7").css({"z-index":2});
			$(document).mousemove(function (event) { 
					if (isMove) { 
						var obj = $('#moveBar7'); 
						obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y}); 
					} 
				} 
			);$(document).mouseup(
				function () { 
					i++;
					isMove = false;
					if(i==j){
						uleft=$('#moveBar7').offset().left;
						utop=$('#moveBar7').offset().top;
						for(var k=0;k<8;k++){
							left[k]=$("#moveBar"+(k+1)).offset().left;
							top[k]=$("#moveBar"+(k+1)).offset().top;
						}
						for(var k=0;k<8;k++){
							if(k!=6){
								if(0<=uleft-left[k]&&uleft-left[k]<=keen&&0<=utop-top[k]&&utop-top[k]<=keen){
									$("#moveBar7").animate({"left":left[k],"top":top[k]});
									$("#moveBar"+(k+1)).animate({"left":oleft,"top":otop});
									break;
								}
							}else{
								continue;
							}
						}
						
					}
				}
				
			); 
			i=0;
		} 
		
	);
	
	$('#banner8').mousedown( 
		function (event) { 
			j++;
			var isMove = true; 
			var abs_x = event.pageX - $('#moveBar8').offset().left; 
			var abs_y = event.pageY - $('#moveBar8').offset().top;
			oleft=$('#moveBar8').offset().left;//鼠标按下时，div距离左边的像素
			otop=$('#moveBar8').offset().top;//鼠标按下时，距离上边的像素
			for(var k=0;k<8;k++){
				$("#moveBar"+(k+1)).css({"z-index":1});
			}
			$("#moveBar8").css({"z-index":2});
			$(document).mousemove(function (event) { 
					if (isMove) { 
						var obj = $('#moveBar8'); 
						obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y}); 
					} 
				} 
			);$(document).mouseup(
				function () { 
					i++;
					isMove = false;
					if(i==j){
						uleft=$('#moveBar8').offset().left;
						utop=$('#moveBar8').offset().top;
						for(var k=0;k<8;k++){
							left[k]=$("#moveBar"+(k+1)).offset().left;
							top[k]=$("#moveBar"+(k+1)).offset().top;
						}
						for(var k=0;k<8;k++){
							if(k!=7){
								if(0<=uleft-left[k]&&uleft-left[k]<=keen&&0<=utop-top[k]&&utop-top[k]<=keen){
									$("#moveBar8").animate({"left":left[k],"top":top[k]});
									$("#moveBar"+(k+1)).animate({"left":oleft,"top":otop});
									break;
								}
							}else{
								continue;
							}
						}
						
					}
				}
				
			); 
			i=0;
		} 
		
	);
} );

index.html 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8">
<title>Qing's Web</title> 
<script src="js/jquery.js" type="text/javascript"></script> 
<link rel="stylesheet" href="css/drag.css" type="text/css"/>
<script type="text/javascript"src="js/drag.js"> </script> 
</head> 
<body style="padding-top: 50px;"> 
<div id="sortable">
	<div id="moveBar1" class="ui-state-default"> 
		<div id="banner1">标题1</div> 
		<div class="content"></div> 
	</div> 
	<div id="moveBar2"class="ui-state-default"> 
		<div id="banner2">标题2</div> 
		<div class="content"></div> 
	</div> 
	<div id="moveBar3"class="ui-state-default"> 
		<div id="banner3">标题3</div> 
		<div class="content"></div> 
	</div> 
	<div id="moveBar4"class="ui-state-default"> 
		<div id="banner4">标题4</div> 
		<div class="content"></div> 
	</div> 
	<div id="moveBar5"class="ui-state-default"> 
		<div id="banner5">标题5</div> 
		<div class="content"></div> 
	</div> 
	<div id="moveBar6"class="ui-state-default"> 
		<div id="banner6">标题6</div> 
		<div class="content"></div> 
	</div> 
	<div id="moveBar7"class="ui-state-default"> 
		<div id="banner7">标题7</div> 
		<div class="content"></div> 
	</div> 
	<div id="moveBar8"class="ui-state-default"> 
		<div id="banner8">标题8</div> 
		<div class="content"></div> 
	</div> 

</div>

</body> 
</html>
文档结构图


猜你喜欢

转载自blog.csdn.net/m0_38084879/article/details/77336931
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022