项目的很多地方都会用到弹出层。比如有一个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;
};

 

实现效果图：

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

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

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