实现多个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;
} $(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>