jQuery 实现拖动浮动层

最新推荐文章于 2020-07-12 10:33:26 发布

limengmeng9006

最新推荐文章于 2020-07-12 10:33:26 发布

阅读量808

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/limengmeng9006/article/details/16339391

本文介绍了一种使用jQuery实现网页浮动层跟随鼠标移动的方法。通过监听鼠标事件，调整浮动层的位置，提供更好的用户体验。

项目的很多地方都会用到弹出层。比如有一个List页面，一行一行的显示了很多的信息。大多时候，每一行都不能显示完与该条记录相关的所有信息，这时候当用户想看具体的信息时，如果有一个弹出层去显示一些详细的信息可以带来很好的用户体验，省的用户在多个页面之间来回切换，看着麻烦。

至于弹出层如何动态的获取与指定记录相关的信息，在webform里可以用jQuery + ashx技术实现，在MVC中就更简单了。这个不是这篇文章的重点。

这篇文章的重点是如何让这个弹出层跟随鼠标移动，因为这个弹出层是浮动在页面上面的，会盖住页面上的一些信息，而如果，这些信息正是用户想看的信息，一个不能拖动的浮动层会让用户很不爽的。

实现环境：vs2008，jQuery。

新建webApp项目，文件列表如下：

PopLayer.css主要控制页面显示样式，浮动层的样式。

JSDragAndDrop.js 主要是jQuery的控制浮动层移动的函数。

Default.aspx 是测试页。jQuery事件绑定代码片段：

 
          $(
  function
  () {

            $(
  "
  a#A_ShowHideDiv
  "
  ).click(
  function
  () {

                $(
  "
  .Pop_Layer
  "
  ).css(
  "
  display
  "
  , 
  "
  block
  "
  );

            });

            $(
  "
  .Pop_Head
  "
  ).mousedown(M_Keydown);

            $(
  "
  .Pop_Head
  "
  ).mousemove(M_Move);

            $(
  "
  .Pop_Head
  "
  ).mouseup(M_Keyup);

            $(
  "
  div.Pop_Head > a
  "
  ).click(PopClose);

            $(
  "
  #PopBtnOK
  "
  ).click(
  function
  () {


  //
              add the ajax function 
  

//
                  $.ajax({
  

//
              });
  


          });

        $(
  "
  #PopBtnCancel
  "
  ).click(PopClose);

    })

主要用到的JS函数（不解释，注释很明白）：

 
  var
   defaultx; 
  //
  鼠标起始位置横坐标
  


  var
   defaulty; 
  //
  鼠标起始位置纵坐标
  


  var
   objx;     
  //
  浮动层设定的横坐标
  


  var
   objy;     
  //
  浮动层设定的纵坐标
  


  var
   posx;     
  //
  鼠标当前横坐标
  


  var
   poxy;     
  //
  鼠标当前纵坐标
  


  var
   IsKeydown 
  =
   
  0
  ;
  //
  标志鼠标左键是否是按下状态
  


  


  function
   M_Keydown(e) {
  //
  当鼠标左键按下，捕捉鼠标当前位置，浮动层位置
  


      IsKeydown 
  =
   
  1
  ;

    $(
  "
  .Pop_Layer
  "
  ).css(
  "
  cursor
  "
  , 
  "
  move
  "
  );
  //
  设定鼠标样式。
  


      defaultx 
  =
   e.pageX;

    defaulty 
  =
   e.pageY;

    objx 
  =
   $(
  "
  .Pop_Layer
  "
  )[
  0
  ].offsetLeft;

    objy 
  =
   $(
  "
  .Pop_Layer
  "
  )[
  0
  ].offsetTop;

};


  function
   M_Keyup() {

    IsKeydown 
  =
   
  0
  ;

    $(
  "
  .Pop_Layer
  "
  ).css(
  "
  cursor
  "
  , 
  "
  default
  "
  );

    
  //
  $(".Pop_Layer").unbind("mousedown", "M_Keydown").unbind("mousemove", "M_Move");
  


  };


  function
   M_Move(ee) {
  //
  拖动。
  


      
  if
   (
  !
  ee) ee 
  =
   window.event;

    
  if
   (IsKeydown 
  ==
   
  1
  ) {

        $(
  "
  .Pop_Layer
  "
  ).css(
  "
  left
  "
  , objx 
  +
   ee.pageX 
  -
   defaultx);

        $(
  "
  .Pop_Layer
  "
  ).css(
  "
  top
  "
  , objy 
  +
   ee.pageY 
  -
   defaulty);

    }

    
  else
   
  return
  ;

};