一个原生的JavaScript拖动方法

Posted 2020-08-16 張暁磊

代码：

 1 function drag(t,p){
 2 
 3     var point = p || null,
 4         target = t || null,
 5         resultX = 0,
 6         resultY = 0;
 7 
 8     (!point)? point = target : \'\'; //如果没有拖动点，则拖动点默认为整个别拖动元素
 9 
10     function getPos(t){
11         var offsetLeft = 0,
12             offsetTop = 0,
13             offsetParent = t;
14 
15         while(offsetParent){
16             offsetLeft+=offsetParent.offsetLeft;
17             offsetTop+=offsetParent.offsetTop;
18             offsetParent = offsetParent.offsetParent;
19         }
20 
21         return {\'top\':offsetTop,\'left\':offsetLeft};
22     }
23 
24     function core(){
25 
26         var width = document.body.clientWidth || document.documentElement.clientWidth,
27             height = document.body.clientHeight || document.documentElement.clientHeight; 
28             maxWidth = width - target.offsetWidth,
29             maxHeight = height - target.offsetHeight;
30 
31         (resultX >= maxWidth)?  target.style.left = maxWidth+\'px\' :  (resultX > 0)?target.style.left = resultX +\'px\': \'\'; //重置默认位置。
32         (resultY >= maxHeight)?   target.style.top = maxHeight +\'px\' : (resultY > 0)?target.style.top = resultY +\'px\':\'\'; //重置默认位置。
33 
34         point.onmousedown=function(e){    
35             var e = e || window.event,
36                 coordX = e.clientX,
37                 coordY = e.clientY,
38                 posX = getPos(target).left,
39                 posY = getPos(target).top;
40 
41             point.setCapture && point.setCapture();    //将Mouse事件锁定到指定元素上。
42             document.onmousemove=function(e){
43 
44                 var ev = e || window.event,
45                     moveX = ev.clientX,
46                     moveY = ev.clientY;
47 
48                 resultX = moveX - (coordX - posX); //结果值是坐标点减去被拖动元素距离浏览器左侧的边距
49                 resultY = moveY - (coordY - posY);
50 
51                 (resultX > 0 )?((resultX < maxWidth)?target.style.left = resultX+\'px\' : target.style.left = maxWidth+\'px\') : target.style.left = \'0px\';  
52                 (resultY > 0 )?((resultY < maxHeight)?target.style.top = resultY+\'px\' : target.style.top = maxHeight+\'px\') : target.style.top = \'0px\'; 
53 
54                 ev.stopPropagation && ev.stopPropagation(); 
55                 ev.preventDefault;
56                 ev.returnValue = false;
57                 ev.cancelBubble = true;
58             };
59         };
60         document.onmouseup=function(){    // 解决拖动时，当鼠标指向的DOM对象非拖动点元素时，无法触发拖动点的onmousedown的BUG。
61             document.onmousemove = null;    
62             point.releaseCapture && point.releaseCapture();    // 将Mouse事件从指定元素上移除。
63         };
64         point.onmouseup=function(e){
65             var e = e || window.event;
66             document.onmousemove = null;
67             point.releaseCapture && point.releaseCapture();
68         };
69     }
70     core();
71     window.onresize = core;    
72 }

使用方式：

1 drag(t,p)
2 /* 
3  * 说明 
4  * t 表示被拖动的元素
5  * p 表示拖动点
6 */
7 
8 // 注意：如果省略拖动点，默认可拖动的区域是整个被拖动元素