主要應用jQuery的bind和unbind方法(jQuery 3.0以上可以使用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.bind('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.unbind('mousemove'); }); </script> </body> </html>
jQuery兼容ie7的前提：
| chrome | firefox | ie7 | ie8+ |
| √ | √ | √ | √ |
雖然ie兼容，但是這種寫法存在弊端。
導致ie拖動時會出現卡頓現象。而火狐谷歌卡頓現象就不明顯。