<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>用JQUERY实现的仿Google首页拖动特效</title> <style type="text/css"> #div_width{ width:98%; margin:0 auto; } *{ margin:0px; padding:0px; } #div_left,#div_right,#div_center{ float:left; width:28%; height:900px; margin:0 3px; } #div_center{ width:38%; } .can_move{ border:1px solid blue; width:100%; margin:5px 0; min-height:150px; } .center_width{ height:200px; } p{ height:30px; color:#fff; line-height:30px; background:#000; cursor:move; } #xuxian{ /*虚线框*/ border:1px dashed #000; margin:5px 0; } </style> <script src="https://www.jb51.net/js/jquery.js"></script> <script> //<![CDATA[ window.onload=function(){ var mouse_down=false; //鼠标时候按下 var x_old=null; //按下鼠标时鼠标的坐标 var y_old=null; var div_move=null; //正在移动的div var div_move_width=null; //正在移动的div的宽 var div_move_height=null; //正在移动的div的高 var xuxian="<div></div>"; //虚线框 document.oncontextmenu=new Function('event.returnValue=false;'); //禁止右键 document.onselectstart=new Function('event.returnValue=false;'); //禁止选中 //当鼠标按下的时候 $("p").mousedown(function(e){ mouse_down=true; //鼠标按下 div_move=$(this).parent(); //指定当前div为正在移动的div div_move_width=div_move.width(); div_move_height=div_move.height(); x_old=e.pageX-$(this).offset().left; //获取鼠标坐标 y_old=e.pageY-$(this).offset().top; //把当前div的position改成absolute div_move.css({ position:'absolute', zIndex:'10', width:div_move_width, height:div_move_height, top:div_move.offset().top, left:div_move.offset().left }); //将虚线框添加到正在移动的div之前的位置 div_move.before(xuxian); $("#xuxian").css({ width:'100%', height:div_move_height }); }); //移动鼠标 $(document).mousemove(function(e){ if(!mouse_down) return false; var _x=e.pageX; var _y=e.pageY; var div_right_div=$("#div_right>div").not(div_move).not("#xuxian"); div_move.css({ //改变正在移动div的top和left top:_y-y_old, left:_x-x_old }); /*注意,因为鼠标当前始终在正在移动的div上面, 所以,鼠标移动不会触发其他元素的mouseenter,mouseleave,mouseover 和mouseout事件,要想达到同样的效果, 只能根据鼠标的坐标来判断鼠标是否进入其他元素*/ var left_left=$("#div_left").offset().left; //确定左边div_left容器的位置 var left_width=$("#div_left").width(); var right_left=$("#div_right").offset().left; //确定右边div_right容器的位置 var right_width=$("#div_right").width(); var center_left=$("#div_center").offset().left; //确定中间div_center容器的位置 var center_width=$("#div_center").width(); //判断鼠标坐标是否进入左边div_left容器 if(_x>left_left&&_x<(left_left+left_width)){ /*选定左边div_left容器下的最后一个可移动div, 不包含当前正在移动的div元素和虚线框*/ var div_left_last=$("#div_left>div").not(div_move).not("#xuxian").filter(":last"); if(div_left_last.length>=1){ //判断时候左边div_left容器下时候有可移动div元素 if(_y>(div_left_last.offset().top+div_left_last.height())){ //判断鼠标是否在左边div_left容器最后一个元素的下边 $("#xuxian").remove(); //如果是,移除之前添加的虚线框 div_left_last.after(xuxian); //把虚线框添加为左边div_left容器的最后一个子元素 $("#xuxian").css({ //设定虚线框的高和宽 width:'100%', height:div_move_height }); }else{ //如果鼠标不在左边div_left容器最后一个元素的下边, //那么,循环判定鼠标是否进入左边div_left容器下的可移动div元素里面 var div_left_div=$("#div_left>div").not(div_move).not("#xuxian"); for(var i=0;i<div_left_div.length;i++){ if(_y>div_left_div.eq(i).offset().top&&(_y<div_left_div.eq(i).offset().top+div_left_div.eq(i).height())){ $("#xuxian").remove(); //如果是,删除之前添加的虚线框 div_left_div.eq(i).before(xuxian); //把虚线框添加到当前鼠标进入的div元素的前面 $("#xuxian").css({ //设定虚线框的高和宽 width:'100%', height:div_move_height }); break; //退出循环 } } } }else{//如果左边div_left容器下面没有任何可移动div元素 var div_left_div=$("#div_left>div").not(div_move).not("#xuxian"); if(div_left_div.length==0){ $("#xuxian").remove(); //移除之前添加的虚线框 $("#div_left").append(xuxian); //把虚线框添加为左边div_left容器的子元素 $("#xuxian").css({ width:'100%', height:div_move_height }); } } }else if(_x>center_left&&_x<(center_left+center_width)){ //判断鼠标是否进入中间div_center容器 /*选定中间div_center容器下的最后一个可移动div, 不包含当前正在移动的div元素和虚线框*/ var div_center_last=$("#div_center>div").not(div_move).not("#xuxian").filter(":last"); if(div_center_last.length>=1){ //判断中间div_center容器的下面时候有可移动div子元素 if(_y>(div_center_last.offset().top+div_center_last.height())){ //判断鼠标是否在中间div_center容器的最后一个可移动div子元素的下边 $("#xuxian").remove(); //如果是,删除之前添加的虚线框 div_center_last.after(xuxian); //把虚线框添加为中间div_center容器的最后一个div子元素 $("#xuxian").css({ //设定虚线框的宽和高 width:'100%', height:div_move_height }); }else{ //如果鼠标不在中间div_center容器最后一个可移动div子元素的下边, //则循环判断鼠标进入的是哪一个iv子元素 var div_center_div=$("#div_center>div").not(div_move).not("#xuxian"); for(var i=0;i<div_center_div.length;i++){ if(_y>div_center_div.eq(i).offset().top&&(_y<div_center_div.eq(i).offset().top+div_center_div.eq(i).height())){ $("#xuxian").remove(); //找到鼠标进入的div子元素,删除之前添加的虚线框 div_center_div.eq(i).before(xuxian); //把虚线框添加到当前鼠标进入的div子元素的前面 $("#xuxian").css({ //设定虚线框的宽度和高度 width:'100%', height:div_move_height }); break; //退出循环 } } } }else{ //如果中间div_center容器的中间没有可移动的div子元素 var div_center_div=$("#div_center>div").not(div_move).not("#xuxian"); if(div_center_div.length==0){ $("#xuxian").remove(); //删除之前添加的虚线框 $("#div_center").append(xuxian); //把虚线框添加为中间div_center的最后一个div元素 $("#xuxian").css({ width:'100%', height:div_move_height }); } } }else if(_x>right_left&&_x<(right_left+right_width)){ //判断鼠标是否进入右边div_right容器 /*选定右边div_right容器下的最后一个可移动div, 不包含当前正在移动的div元素和虚线框*/ var div_right_last=$("#div_right>div").not(div_move).not("#xuxian").filter(":last"); if(div_right_last.length>=1){ //判断右边div_right容器下边是否有可移动的div子元素 if(_y>(div_right_last.offset().top+div_right_last.height())){ //判断鼠标时候在右边div_right容器最后一个可移动div元素的下边 $("#xuxian").remove(); //如果是,删除之前添加的虚线框 div_right_last.after(xuxian); //添加虚线框为右边div_right容器的最后一个元素 $("#xuxian").css({ //设定虚线框的宽和高 width:'100%', height:div_move_height }); }else{ //如果鼠标不在右边div_right容器最后一个可移动div元素的下边, //则循环判断鼠标进入到右边div_right容器下哪个可移动div元素里面 for(var i=0;i<div_right_div.length;i++){ if(_y>div_right_div.eq(i).offset().top&&(_y<div_right_div.eq(i).offset().top+div_right_div.eq(i).height())){ $("#xuxian").remove(); //找到鼠标进入的div元素,删除之前添加的虚线框 div_right_div.eq(i).before(xuxian); //把虚线框添加到鼠标进入的div元素的前面 $("#xuxian").css({ //设定宽和高 width:'100%', height:div_move_height }); break; //退出循环 } } } }else{ //如果右边div_right元素的下边没有可移动的div子元素 if(div_right_div.length==0){ $("#xuxian").remove(); //删除之前添加的虚线框 $("#div_right").append(xuxian); //把虚线框添加为右边div_right容器的子元素 $("#xuxian").css({ //设定虚线框的宽和高 width:'100%', height:div_move_height }); } } } }).mouseup(function(){ mouse_down=false; //鼠标松开 $("#xuxian").before(div_move); //将当前正在移动的div元素添加到虚线框的前面 div_move.css({ //更改正在移动div元素的position和宽 position:'static', width:'100%' }); $("#xuxian").remove(); //删除虚线框 return false; }); } //]]> </script> </head> <body> <div> <div> <div> <p>音乐</p> </div> <div> <p>活动</p> </div> </div> <div> <div> <p>科技</p> </div> </div> <div> <div> <p>新闻</p> </div> <div> <p>元素</p> </div> </div> </div> </body> </html>
jQuery实现仿Google首页拖动效果的方法
内容版权声明：除非注明，否则皆为本站原创文章。