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;

};