javascript 实现拖动效果
在写这篇文章之前我一直在纠结一个问题，那就是以前实现的拖动拖快了总会有一些卡顿，脱节，不流畅，只能轻轻的小心翼翼的慢慢的拖拽，这样就失去了web页面中窗口拖动的意义，所以在这儿我分享出来和大家一起共同进步。
首先说一下javascript+div拖动的原理：
1.要拖动必然要触发3个事件，鼠标左键按下去（onmousedown）, 移动鼠标（onmousemove）, 释放鼠标左键（onmouseup）.
2.拖动之前必须要对目标对象（也就是需要拖动的div）进行初始化事件绑定，下面代码里面会详细介绍
3.下面就是拖动的详细步骤了，首先也拖动对象绑定一个onmousedown事件函数，这个事件函数里面控制一个状态，是否准备好拖动，获取拖动对象的坐标位置（这个坐标位置是相当于浏览器的）。然后在给document对象绑定onmousemove, 在onmousemove事件里面做捕获鼠标的坐标，让拖动对象的位置跟随鼠标的位置，重儿就实现了拖动。但拖到一定的位置总得停下来吧， 好，这个onmouseup事件处理函数就用上了，在这个事件函数里面只做一个事，那就是把拖动状态改为拖动停止。最后一点说说为什么要把onmousemove事件函数绑定在document上面而不是拖动对象上，如果是绑定在拖动对象上面就会出现本文开头说的卡顿， 脱节，不流畅，反正就是有各种不和谐因素。原因我也不是很明白，我想可能跟浏览器内部实现机制有关嘛， 如果有哪位大神知道请不吝赐教。
下面是源码，都很简单，我不是用javascript对象的方式去封装的，只要有一些简单的javascript，dom, css知识的都能看懂， 还有本人是第一次写博客，还请各位看官多提意见多多拍砖。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
6 <title>drag</title>
7
8 <script type="text/javascript" language="javascript">
9 window.onload = function() {
10 var drag = document.getElementById("box");
11 var x = 0, //初始化拖放对象的x坐标
12 y = 0, //初始化拖放对象的y坐标
13 isMove = false; //初始化拖放对象的状态， false停止移动，true开始移动
14 //开始移动
15 drag.onmousedown = function(e) {
16 isMove = true;
17 var evt = e || window.event;
18 //获取鼠标的位置，兼容多浏览器
19 x = evt.pageX ? evt.pageX : evt.clientX;
20 y = evt.pageY ? evt.pageY : evt.clientY;
21 x -= this.getBoundingClientRect().left; //获取拖动对象的x坐标
22 y -= this.getBoundingClientRect().top; //获取拖动对象的y坐标
23 };
24 //移动中..
25 document.onmousemove = function(e) {
26 if(isMove) {
27 var evt = e || window.event;
28 var ox = evt.pageX ? evt.pageX : evt.clientX;
29 var oy = evt.pageY ? evt.pageY : evt.clientY;
30 drag.style.left = (ox - x)+'px';
31 drag.style.top = (oy - y)+'px';
32 }
33 };
34 //结束移动
35 document.onmouseup = function() {
36 isMove = false;
37 };
38 };
39 </script>
40
41 <style type="text/css">
42 </style>
43
44 </head>
45
46 <body>
47 <div ></div>
48 </body>
49
50 </html>drag
- 上一篇 »HTML5 拖放
- 下一篇 »JavaScript函数实现鼠标指向后带图片的提示效果