兼容IE,FF,OPERA的可拖拉层

妈的个巴子，折腾一晚上，终于搞清楚IE跟FF下event的区别了，写了个漂浮可拖拉层，IE,FF,OPERA都能正常使用，还是OPERA好，两个都能兼容，开始折腾半天不是IE不支持就是FF不支持，但无论怎么搞，OPERA都能兼容，我发现我越来越爱OPERA了！还是OPERA对JS兼容得更好！IT业的后来者要成功，就必须要兼容先驱的一些即使不是很完美的东西，有些标准往往不是很完美，但是标准从来都是由强者和先驱者主导的！FF注定了只能是部分人的玩具，就像linux，个人用户很有限，当然，linux本来就不是面向最普通的用户的，FF却是面向最普通最简单化的用户的，不兼容前面的强者，甚至对自己推崇的W3C标准都不能完美支持，注定了只能做个配角！

 

<! 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 >

< style  type ="text/css" >
<!--
#bj  {
    height :  200px ;
    width :  200px ;
    border :  1px dashed #FF0000 ;
    cursor :  move ;
    position :  absolute ;
    z-index :  10 ;
}
-->
</ style >

< div  class ="bj"  id ="bj" > 此处显示  class "bj" id "bj" 的内容 </ div >

< script >

$( ' bj ' ).style.left = ' 120px ' ;
$( ' bj ' ).style.top = ' 120px ' ;


$( ' bj ' ).onmousedown = function  (evt){
     try {
        evt = event;
    } catch (e){
        evt = evt;
    }
    
    px = parseInt($( ' bj ' ).style.left);
    py = parseInt($( ' bj ' ).style.top);
    x = evt.clientX;
    y = evt.clientY;
    document.onmousemove = move;
}

function  $(id){
     return  (document.getElementById(id)) ? document.getElementById(id): false ;
}
function  move(evt){
     try {
        evt = event;
    } catch (e){
        evt = evt;
    }
    $( ' bj ' ).style.left = evt.clientX - x + px + ' px ' ;
    $( ' bj ' ).style.top = evt.clientY - y + py + ' px ' ;
    $( ' bj ' ).innerHTML = ' 鼠标X轴： ' + evt.clientX + ' <br>鼠标Y轴： ' + evt.clientY + ' <br>层X坐标： ' + $( ' bj ' ).style.left + ' <br>层Y坐标： ' + $( ' bj ' ).style.top;
    document.onmouseup = function  (){
        document.onmousemove = null ;
    }
}

</ script >
</ body >
</ html >