實現dom元素拖動

時間 2019-12-14

標籤實現 dom 元素拖動欄目 HTML 简体版

原文原文鏈接

本文主要寫一下如何實現dom元素拖動，目前使用jquery庫實現之。css

主要的註釋附在代碼中，你們能夠根據代碼畫一個小的窗口模型圖，以便於理解。html

 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。