jQuery 拖动浮动层（PopLayer Drag and Drop）

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

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

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

实现环境：vs2008，jQuery。

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

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

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

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

View Code

        $(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;

};

 

实现效果图：

呵呵，页面做的太丑陋，会页面设计可以好好设计一下。

后续文章会展示如何动态加载数据到浮动层。

最后附上：页面源码下载。