用JQUERY实现的可拖动左右摆放，随意移动位置的图层特效

稿源：互联网 2018-09-16 01:04:11 点击： 9312 撤稿纠错

阿里西西提示您，试试鼠标拖动标题处进行布局。

以下讨论的是和JQUERY 拖动移动相关的用JQUERY实现的可拖动左右摆放，随意移动位置的图层特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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="http://code.jquery.com/jquery-latest.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 id='xuxian'></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 id="div_width">
  <div id="div_left">
   <div class="can_move">
    <p>音乐</p>
   阿里西西提示您，试试鼠标拖动标题处
   </div>
   <div class="can_move">
    <p>活动</p>
   </div>
  </div>
  <div id="div_center">
   <div class="can_move center_width">
    <p>科技</p>
   </div>
  </div>
  <div id="div_right">
   <div class="can_move">
    <p>新闻</p>
   </div>
   <div class="can_move">
    <p>元素</p>
   </div>
  </div>
 </div>
</body>
</html>

关于用JQUERY实现的可拖动左右摆放，随意移动位置的图层特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018091693191.shtml方便下次再访问哦。

·上一篇： 通过js制作竖向的tab选项卡切换显示不同内容的特效例子
·下一篇： 当鼠标悬停焦点在特定位置时显示隐藏层和表单的特效

用JQUERY实现的可拖动左右摆放，随意移动位置的图层特效

文章分类LIST >>返回首页

最新游戏

最新新闻