本文主要写一下如何实现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>
时间： 2024-12-08 13:14:27