JS拖动层（支持ie，ff，opera，safari）

共享一个简单的JS拖动层效果，支持ie，ff，opera，safari；

ie有专门的拖动方法：dragstart,drag,dragend分别是开始拖动，拖动，结束拖动。但是其他浏览器（dom类，例如ff）不支持这些拖动方法。所以只能用鼠标事件模拟拖动层效果。

实现原理：

我们知道用户使用拖动效果，需要完成一下事件

1.在某个区域按下鼠标左键，

2.按住鼠标左键不放，拖动鼠标；

3.拖到合适的位置后，放开鼠标左键。

这3步用JS的事件来描述的话就是：

用户在可拖动区域onmousedown，并在onmousedown的情况下触发onmousemove事件，当onmouseup的时候移除onmousemove事件。

看代码：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 无标题文档 </ title >
</ head >

< body >
< div  id ="f"  style ="position: absolute; width: 200px; height: 150px; background-color: #ccc; top: 150px; left: 200px; z-index: 101; border: solid 1px blue;" >
   < div  id ="title"  style ="background-color: Blue; cursor: move; height: 20px; color: #fff;font-size: 13px; padding-top: 5px; padding-left: 10px;" >  拖动层  </ div >
   </ div >
< script  type ="text/javascript" >
var  posX;
var  posY;  
fdiv  =  document.getElementById( " f " );  
document.getElementById( " title " ).onmousedown = function (e)
{
   if ( ! e) e  =  window.event;  // 如果是IE
  posX  =  e.clientX  -  parseInt(fdiv.style.left);
  posY  =  e.clientY  -  parseInt(fdiv.style.top);
  document.onmousemove  =  mousemove;  
}
document.onmouseup  =   function ()
{
  document.onmousemove  =   null ;
}
function  mousemove(ev)
{
   if (ev == null ) ev  =  window.event; // 如果是IE
  fdiv.style.left  =  (ev.clientX  -  posX)  +   " px " ;
  fdiv.style.top  =  (ev.clientY  -  posY)  +   " px " ;
}
</ script >

</ body >
</ html >