首页 > 代码库 > 实现dom元素拖动

实现dom元素拖动

2024-07-31 00:00:22   219人阅读

本文主要写一下如何实现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                 // top36                 // 界限值：当对话框拖动到上边界时，将top置为037                 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: nowTop59                 });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>

 

实现dom元素拖动


联系
我们