js实现鼠标拖拽
主要原理：
1、当鼠标按下时，记录鼠标坐标，用到的是 onmousedown；
2、当鼠标移动时，计算鼠标移动的坐标之差，用到的是 onmousemove；
3、当鼠标松开时，清除事件，用到的是 onmouseup；
了解的知识：
1、div 的 offsetLeft 与 style.left 的区别：
http://longxu1314.blog.163.com/blog/static/2112990412013101814844444/
效果图如下：
突然发现有没有效果图都一样哈哈，不说废话了，上代码：
html代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html><html><head> <meta charset="utf8"> <title>js拖拽效果</title> <style type="text/css"> #div1 { width : 200px; height: 200px; position: absolute; background: #99dd33; cursor: move; } </style></head><body> <div id="div1"></div></body><script type="text/javascript"> // js代码</script></html> |
js代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
window.onload function() { var disX = disY = 0; // 鼠标距离div的左距离和上距离 var div1 = document.getElementById("div1"); // 得到div1对象 // 鼠标按下div1时 div1.onmousedown = function(e) { var evnt = e || event; // 得到鼠标事件 disX = evnt.clientX - div1.offsetLeft; // 鼠标横坐标 - div1的left disY = evnt.clientY - div1.offsetTop; // 鼠标纵坐标 - div1的top // 鼠标移动时 document.onmousemove = function(e) { var evnt = e || event; var x = evnt.clientX - disX; var y = evnt.clientY - disY; var window_width = document.documentElement.clientWidth - div1.offsetWidth; var window_height = document.documentElement.clientHeight - div1.offsetHeight; x = ( x < 0 ) ? 0 : x; // 当div1到窗口最左边时 x = ( x > window_width ) ? window_width : x; // 当div1到窗口最右边时 y = ( y < 0 ) ? 0 : y; // 当div1到窗口最上边时 y = ( y > window_height ) ? window_height : y; // 当div1到窗口最下边时 div1.style.left = x + "px"; div1.style.top = y + "px"; }; // 鼠标抬起时 document.onmouseup = function() { document.onmousemove =null; document.onmouup = null; }; return false; };}; |
