event.pageY和event.pageX

event.pageY 属性返回鼠标指针的位置，相对于文档的上边缘。

提示：该事件属性通常与 event.pageX属性一起使用。(简写：e.pageY(或者e.pageX))

实例：

drag

首先我创建一个盒子drag

.drag{
    height: 100px; width: 100px;
position:absolute;
background:#0000CC;
top:100px;left:200px;
padding:;
}
<div class="drag"></div>

效果图

jq代码

$(document).ready(function(){
    var move=false;//移动标记
    var _x,_y;//鼠标离控件左上角的相对位置
    $(".drag").mousedown(function(e){
        move=true;
        _x=e.pageX-parseInt($(".drag").css("left"));
        _y=e.pageY-parseInt($(".drag").css("top"));
    });
    $(document).mousemove(function(e){
        if(move){
            x=e.pageX-_x;//控件左上角到屏幕左上角的相对位置
            y=e.pageY-_y;
            $(".drag").css({"top":y,"left":x});
        }
    }).mouseup(function(){
        move=false;
    });
});    

效果：