实现dom元素拖动
本文主要写一下如何实现dom元素拖动，目前使用jquery库实现之。
主要的注释附在代码中，大家可以根据代码画一个小的窗口模型图，以便于理解。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>实现dom元素拖动</title> 6 <style> 7 .dialog { 8 position: absolute; 9 top: 0; 10 left: 0; 11 width: 500px; 12 height: 400px; 13 background-color: blue; 14 } 15 </style> 16 <script src="js/jquery-1.7.2.js"></script> 17 </head> 18 <body> 19 <div class="dialog dialog-drag">拖动</div> 20 <script> 21 (function($) { 22 var windowWidth, 23 windowHeight, 24 mouseToDialogX, 25 mouseToDialogY, 26 dialogWidth, 27 dialogHeight; 28 var $target, 29 $doc = $(document); 30 var _move = function(e) { 31 var nowTop, 32 nowLeft, 33 pageX = e.pageX, 34 pageY = e.pageY; 35 // top 36 // 界限值：当对话框拖动到上边界时，将top置为0 37 if (pageY - mouseToDialogY < 0) { 38 nowTop = 0; 39 } 40 // 界限值：当对话框拖动到下边界时，将top置为(窗口高度-对画框高度)，即将对话框底部与页面平齐 41 else if (dialogHeight + (pageY - mouseToDialogY) > windowHeight) { 42 nowTop = windowHeight - dialogHeight; 43 } 44 // 正常值：鼠标纵向坐标-鼠标纵向坐标与对话框上边缘的距离 45 else { 46 nowTop = pageY - mouseToDialogY; 47 } 48 // left - 解释同上 49 if (pageX - mouseToDialogX < 0) { 50 nowLeft = 0; 51 } else if (dialogWidth + (pageX - mouseToDialogX) > windowWidth) { 52 nowLeft = windowWidth - dialogWidth; 53 } else { 54 nowLeft = pageX - mouseToDialogX; 55 } 56 $target.css({ 57 left: nowLeft, 58 top: nowTop 59 }); 60 }; 61 // 拖动开始 62 $doc.on('mousedown', '.dialog-drag', function (e) { 63 var $this = $(this), 64 $win = $(window); 65 $target = $this; 66 windowWidth = $win.width(); 67 windowHeight = $win.height(); 68 mouseToDialogX = e.pageX - $this.offset().left; 69 mouseToDialogY = e.pageY - $this.offset().top; 70 dialogWidth = $this.width(); 71 dialogHeight = $this.height(); 72 // 只有对话框拖动时，才会有mousemove事件 73 $(document).on('mousemove', _move); 74 }); 75 // 拖动结束 76 $doc.on('mouseup', '.dialog-drag', function (e) { 77 $target = null; 78 // 当拖动结束时， 解绑mousemove事件 79 $(document).off('mousemove', _move); 80 }); 81 })(jQuery); 82 83 </script> 84 </body> 85 </html>
