标签：nbsp pager osi 超出 height title pre ack 应用
主要应用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拖动时会出现卡顿现象。而火狐谷歌卡顿现象就不明显。
标签：nbsp pager osi 超出 height title pre ack 应用
原文地址：http://www.cnblogs.com/cquptzy/p/7476445.html
