javascript 实现拖动效果

来源：互联网发布：eclipse java tomcat 编辑：程序博客网时间：2024/05/22 04:55

首先说一下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 id="box" style="border:1px solid  orange;width:50px;height:50px;cursor:move;position:absolute;left:100px;top:100px;background-color:white;"></div>48     </body>49