一个原生的JavaScript拖动方法

代码:

一个原生的JavaScript拖动方法
 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 }
一个原生的JavaScript拖动方法

使用方式:

一个原生的JavaScript拖动方法
1 drag(t,p)
2 /*
3 * 说明
4 * t 表示被拖动的元素
5 * p 表示拖动点
6 */
7
8 // 注意:如果省略拖动点,默认可拖动的区域是整个被拖动元素
一个原生的JavaScript拖动方法
上一篇:mongodb的安装与简单操作


下一篇:JSP页面中文乱码