实现多个div拖拽移动,交换位置功能,代码复制可运行,有交换特效
2017-08-17 17:31
1051 查看
废话不多说,直接上代码:
drag.css
$(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&
4000
lt;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
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&
4000
lt;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>文档结构图
相关文章推荐
- 点滴积累【JS】---JS小功能(onmousedown实现鼠标拖拽div移动)
- JS+CSS实现几个DIV层上下移动交换位置的效果
- asp下实现代码的“运行代码”“复制代码”“保存代码”功能源码
- asp下实现代码的“运行代码”“复制代码”“保存代码”功能源码
- asp下实现代码的“运行代码”“复制代码”“保存代码”功能源码
- asp下实现代码的“运行代码”“复制代码”“保存代码”功能源码
- 通过Html实现在线运行,复制,保存代码的功能
- js实现图片在div容器内移动的网页特效代码
- MovieClip实现拖拽等移动位置的功能
- MovieClip实现拖拽等移动位置的功能
- JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
- asp下实现代码的“运行代码”“复制代码”“保存代码”功能源码
- js实现div拖拽互换位置
- HTML5 拖拽复制功能的实现
- ListView拖拽交换 item 的实现(QQ 分组管理功能)
- Java实现文件夹的复制、移动、删除代码
- 基于jQuery实现Div窗口震动特效代码-代码简单
- “运行代码”“复制代码”“保存代码”功能 脚本
- JavaScript与Div对层定位和移动获得坐标的实现代码