鼠标拖动事件_js效果（深入分析）

鼠标拖动事件_js效果（深入分析）

 from http://hi.baidu.com/xuemeiweb/blog/item/3c692f66150021cc80cb4afb.html

鼠标拖动是很常见的js效果，例如我们装扮自己的博客、空间时常用到拖动某一个版块到任意位置；淘宝网上对要购买的衣服有放大镜效果（鼠标拖动效果是其中的一部分）拖动放大镜时需要用到鼠标拖动效果；有时候我们打开某一个图片时会拖动到图片查看器打开，这时也需要鼠标拖动效果；鼠标拖动一个窗口时，也会用到鼠标拖动效果。这里说的鼠标拖动是在网页上操作的鼠标拖动效果。鼠标拖动的实现方式有很多种，这里会对各种思路做一个分析和比较，并对其中我认为比较好的思路进行详细解析。

思路一：鼠标在页面上移动时不断获取鼠标位置，并将鼠标的位置信息赋值给随鼠标移动的标签，对标签进行定位；这样鼠标就能进行拖动标签了。这种鼠标拖动方式常见于淘宝上的放大镜效果。这里用到一种方法即：怎样获取鼠标所在的位置。这需要用到event事件，其中FF不支持window.event事件但支持传参chrome两种方式均支持不用管，所以需要兼容IE/FF的写法是：

function move(e){
 
 

  
  e=e||window.event; //event兼容IE和firefox
 
 
 
 

  
  var x=e.clientX; //鼠标移动时获取x轴坐标
 
 
 
 

  
  var y=e.clientY; //鼠标移动时获取y轴坐标
 
 
 
 

  
  }
 
 

明白了怎样获取鼠标的位置，只需要将鼠标的位置信息赋值给鼠标要拖动的标签为之定位即可，完整的js代码是：

 
 

  
  <script type="text/javascript">
 
 
 
 

  
  var ff=document.getElementById_x("aa");
 
 
 
 

  
  var lt=ff.offsetLeft;
 
 
 
 

  
  var tp=ff.offsetTop;
 
 
 
 

  
  function move(e){
 
 
 
 

  
  e=e||window.event; //event兼容IE和firefox
 
 
 
 

  
  var x=e.clientX; //鼠标移动时获取x轴坐标
 
 
 
 

  
  var y=e.clientY; //鼠标移动时获取y轴坐标
 
 
 
 

  
  ff.style.left=(x-100)+"px"; //为标签赋值定位
 
 
 
 

  
  ff.style.top=(y-100)+"px";
 
 
 
 

  
  }
 
 
 
 

  
  ff.οnmοusemοve=move;
 
 
 
 

  
  </script>
 
 

其中获取鼠标位置可以用返回鼠标位置来做即在函数move中加入另一个函数来返回鼠标位置并用传递参数的方法来传递，当然这里并没有必要这样做，而且这样做在这里也并不节省代码，这里只是多提供一种方法而已。下面是用返回值的方法的js代码：

 
 

  
  
 <script type="text/javascript">
  
  
  var tt=document.getElementById("out");
  
  
  var ff=document.getElementById("aa");
  
  
  var wid=ff.offsetWidth/2;
  
  
  var hei=ff.offsetHeight/2; 
  
  
  function move(e){
  
  
   e=e||window.event;
  
  
   m=mv(e);
  
  
   ff.style.left=(m.x-wid)+"px";
  
  
   ff.style.top=(m.y-hei)+"px";
  
  
  function mv(e){
  
  
   return {
  
  
   x:e.clientX, 
  
  
   y:e.clientY
  
  
   }
  
  
  }
  
  
  }
  
  
  ff.οnmοusemοve=move;
  
  
 </script>
 
 

思路二：其实算是另一种鼠标拖动，即当鼠标按下时获取某一个标签，鼠标按下并移动时标签随鼠标移动，当松开鼠标时解除标签移动事件。初时我的思路是鼠标的三个事件鼠标按下、鼠标移动、鼠标松开。但是当完成后在各个浏览器下测试时发现在FF下非常卡，就像电脑被卡住了一样。js代码如下：

 
 

  
   <script type="text/javascript">
  var ff=document.getElementById("aa"); //获取对象div
  var z;  //声明全局变量
  ff.οnmοusedοwn=function(e){
   e=e||window.event;
   var m=e.clientX; //鼠标按下时获取x轴坐标
   var n=e.clientY; //鼠标按下时获取y轴坐标
   l=ff.offsetLeft; //获取div的左位移
   t=ff.offsetTop;  //获取div的右位移
   z=true;   //为变量赋值
  document.οnmοuseοver=function xx(e){
   e=e||window.event;
   var x=e.clientX; //鼠标移动时获取x轴坐标
   var y=e.clientY; //鼠标移动时获取y轴坐标
   if (z==true)  //当鼠标按下并移动时执行
   {
    ff.style.left=l+(x-m)+"px";//将移动后的坐标赋给相应的位移
    ff.style.top=t+(y-n)+"px";
   }
  }
  document.οnmοuseup=function(){z=false;} //鼠标松开时为z赋值终止div的移动
  }
 </script>
 
 

经老师分析这种方法确实可用但是因为有兼容性差异用户体验不好，推荐了另一种方法即：只需用鼠标的两个事件。当鼠标按下时不断获取鼠标的位置并赋值给标签，即加入一个定时器控制每10毫秒执行一次此函数就不会有卡屏的现象，当鼠标松开时解除定时器。但是我们仔细分析就知道这样做是非常消耗电脑内存的。那我们有什么好的方法来执行这样的一个鼠标事件呢？

思路三：其实是对思路一和思路二的补充理解，即当鼠标按下时触发鼠标移动要执行的函数，当鼠标松开时解除对函数的绑定。这样就能达到思路二中描述的鼠标拖动事件，而又不会不断的消耗大量的内存。这只是一种思路js代码就以后再附上。

完结：以上是我对鼠标拖动事件做的一些比较练习，如果有错误的地方希望能够得到大家的指正。

PS：各种位置坐标：http://www.docin.com/p-219840634.html