<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.echo{
400px;
min-height: 260px;
background: pink;
position: absolute;
}
.echo .title{
font: 18px/40px "微软雅黑";
background: #f7f7f7;
padding:0 40px;
color: #666;
cursor: move;
}
.echo .title i{
float: right;
font:18px/40px "宋体";
margin-right: -27px;
}
</style>
<body>
<div class="echo">
<h2 class="title">注册<i>×</i></h2>
</div>
</body>
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//1.获取元素
var echo = $('.echo');
var title = echo.children('.title');
var x = 0;
var y = 0;
var off = 0;//拖动开关 0关闭 1开启
//2.添加鼠标按下事件
title.mousedown(function(e){
//3.根据鼠标的位置-盒子的位置得到鼠标与盒子之间的差值 这个值在移动的过程中不会改变
x = e.clientX - echo.offset().left;
y = e.clientY - echo.offset().top;
off = 1;
}).mousemove(function(e){
//阻止拖动过程中文字被选中
window.getSelection ? window.getSelection().removeAllRanges() : window.document.selection.empty();
//4.添加鼠标移动事件 如果开关关闭直接终止
if(!off){
return ;
}
var left = e.clientX - x;
var top1 =e.clientY - y;
//4.1可以自己定条件限制移动的范围
top1 = top1 <0 ? 0 : top1;
left = left<0 ? 0 : left;
left = left > $(window).width() - echo.width() ? $(window).width() - echo.width() : left;
//5.根据鼠标的位置减当初的差值计算出 盒子移动的位置
echo.css({left:left,top:top1});
}).mouseup(function(){
//鼠标抬起关闭开关
off = 0;
}).mouseout(function(){
off = 0;
})
</script>
</html>