主要应用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拖动时会出现卡顿现象。而火狐谷歌卡顿现象就不明显。
jQuery实现弹出框拖拽
原文地址：http://www.cnblogs.com/cquptzy/p/7476445.html