js drag拖动效果

最新推荐文章于 2022-11-02 18:15:00 发布

weixin_33841503

最新推荐文章于 2022-11-02 18:15:00 发布

阅读量167

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/rockyoungljy/archive/2012/05/11/2495976.html

版权

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="gb2312" />
 5     <title></title>
 6     <style type="text/css">
 7         *{ margin:0; padding:0;}
 8         html,body{ overflow:hidden;}
 9         .drag-box{ width:200px; height:200px; background:#ccc; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px;}
10         .drag-title{ height:24px; background:#000; cursor:move;}
11     </style>
12 </head>
13 <body>
14      <div class="drag-box" id="dBox">
15          <div class="drag-title">
16              
17          </div>
18      </div>
19 
20      <script type="text/javascript">
21          var drag = function(dragObj){
22             var drag = typeof dragObj === 'string' ? document.getElementById(dragObj) : dragObj;
23             var dTitle = drag.getElementsByTagName('div')[0];
24             var disX = disY = 0;
25             var isDrag = false;
26             
27             dTitle.onmousedown = function(evt){
28                 evt = evt || window.event;
29                 isDrag = true;
30 
31                 disX = evt.clientX - drag.offsetLeft;
32                 disY = evt.clientY - drag.offsetTop;
33 
34                 this.setCapture && this.setCapture();
35 
36                 return false;
37             }
38 
39             document.onmousemove = function(evt){
40                 evt = evt || window.event;
41                 if(!isDrag) return false;
42 
43                 drag.style.margin = 0;
44                 drag.style.left = evt.clientX - disX + 'px';
45                 drag.style.top = evt.clientY - disY + 'px';
46 
47                 return false;
48             }
49 
50             document.onmouseup = window.onblur = dTitle.onlosecapture = function(){
51                 isDrag = false;
52                 dTitle.releaseCapture && dTitle.releaseCapture();
53             }
54          }
55      </script>
56 
57      <script type="text/javascript">
58          drag('dBox');
59      </script>
60 </body>
61 </html>