欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-08 10:06:50
...

废话不多说,直接上代码:

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>
文档结构图