主要应用jQuery的on和off方法实现在 mousedown 的情况下进行mousemove。
其他：$(window).width() 、$(window).height() ---- 获取浏览页面的宽高。
pageX、pagerY（ie8不兼容）或 clientX、clientY --------- 获取鼠标当前位置的横轴纵轴。
offset().left、offset().top------------------------- div距离左边界的长度和上边界的长度。
下面是简易实现方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移动式弹出框</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(215,215,215,0.2);
}
.eject{
height: 200px;
width: 400px;
background-color: blue;
position: absolute;
top: 100px;
left: 30%;
}
.eject_move{
width: 400px;
height: 50px;
background-color: red;
cursor: move;
line-height: 50px;
text-align: center;
font-size: 2em;
}
</style>
</head>
<body>
<div class="eject">
<div class="eject_move">拖动位置</div>
</div>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 可移动弹出框
var eject_move = $(".eject_move");
var eject = $(".eject");
eject_move.mousedown(function(e){
var max_x = $(window).width() - 380; //获取浏览页面的宽度
var max_y = $(window).height() -200;
var ev = window.event || e;
var old_mouse_x = ev.clientX; //获取鼠标开始的横轴位置
var old_mouse_y = ev.clientY; //获取鼠标开始的纵轴位置
var position_l = eject.offset().left; //弹出框距离的横轴位置
var position_t = eject.offset().top; //弹出框距离的纵轴位置
eject_move.on(‘mousemove‘,function(n){
var nv = window.event || n;
var new_mouse_x = nv.clientX; //获取鼠标现在的横轴位置
var new_mouse_y = nv.clientY; //获取鼠标现在的纵轴位置
var new_x = new_mouse_x - old_mouse_x +position_l; //弹出框现在的横轴位置
var new_y = new_mouse_y - old_mouse_y +position_t; //弹出框现在的纵轴位置
//三元表达式 判断有没有超出边界，有的话置于相应的值
new_x = (new_x < 0 )?0:new_x;
new_y = (new_y < 0 )?0:new_y;
new_x = (new_x > max_x)?max_x:new_x;
new_y = (new_y > max_y)?max_y:new_y;
eject.css({‘left‘:new_x,‘top‘:new_y});
});
});
// 鼠标抬起
eject.mouseup(function(){
eject_move.off(‘mousemove‘);
});
</script>
</body>
</html>
jQuery兼容ie7的前提：
| chrome | firefox | ie7 | ie8+ |
| √ | √ | √ | √ |
虽然ie兼容，但是这种写法存在弊端。
导致ie拖动时会出现卡顿现象。而火狐谷歌卡顿现象就不明显。
时间： 2024-08-03 11:19:33