第一种原生js写法
window.onload=function ()
{
var oDrag=document.getElementById('drag'); oDrag.onmousedown=function (ev)
{
var oEvent=ev||event;
var disX=oEvent.clientX-oDrag.offsetLeft;//x坐标
var disY=oEvent.clientY-oDrag.offsetTop;//y坐标 document.onmousemove=function (ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-disX;//移动x坐标位置
var t=oEvent.clientY-disY;//移动y坐标位置
//限制范围
if(l<0)
{
l=0;
}
else if(l>document.documentElement.clientWidth-oDrag.offsetWidth)
{
l=document.documentElement.clientWidth-oDrag.offsetWidth;
} if(t<0)
{
t=0;
}
else if(t>document.documentElement.clientHeight-oDrag.offsetHeight)
{
t=document.documentElement.clientHeight-oDrag.offsetHeight;
} oDrag.style.left=l+'px';
oDrag.style.top=t+'px';
}; document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
};
};
第二种jQuery写法
$(function(){
$('#drag').mousedown(function (){
var patch=parseInt($(this).css("height"))/2; /* 也可以写成var patch=parseInt($(this).css("width"))/2*/
$(document).mousemove(function (event){
var ox=event.clientX;
var oy=event.clientY;
var t=oy-patch;
var l=ox-patch;
var w=$(window).width()-$('#drag').width();
var h=$(window).height()-$('#drag').height();
if(t<0){
t=0;
}
else if(t>h){
t=h;
}
if(l<0){
l=0;
}
else if(l>w){
l=w;
}
$('.drag').css({top:t,left:l})
})
});
$(document).mouseup(function (){
$(this).unbind("mousemove");
});
})