<span style="font-size:12px;">详情参考:</span><span style="color: rgb(51, 51, 51); font-family: tahoma, arial, 宋体; line-height: 45px; white-space: nowrap; background-color: rgb(238, 238, 241);"><span style="font-size:10px;">妙味课堂原创JavaScript视频教程——事件详解3</span></span>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-2.1.4.js"></script>
<script>
$(function(){
var disX=0;
var disY=0;
$('div').mousedown(function(ev){
disX=ev.pageX-$(this).offset().left;
disY=ev.pageY-$(this).offset().top;
$(document).mousemove(function(ev){
var l=ev.pageX-disX;
var t=ev.pageY-disY;
if(l<0)
{
l=0;
}else if (l>$(window).width()-$('div').get(0).offsetWidth) {
l=$(window).width()-$('div').get(0).offsetWidth;
};
if (t<0) {
t=0;
}else if(t>$(window).height()-$('div').get(0).offsetHeight){
t=$(window).height()-$('div').get(0).offsetHeight;
}
$('div').css('left',l);
$('div').css('top',t);
})
$(document).mouseup(function(){
$(document).off();
})
return false;//阻止默认事件和默认行为
})
});
</script>
<style>
.box{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>