具体步骤：
1.在对象(层)上按下鼠标时，先捕获到需要拖曳的对象，然后获取或设置该对象的相关属性。

obj=event.srcElement
obj.setCapture()
z=obj.style.zIndex
obj.style.zIndex=100
x=event.offsetX
y=event.offsetY
down=true

2.开始拖曳时，捕获鼠标当前位置，并根据该数值设置被拖曳对象的位置。

obj.style.posLeft=document.body.scrollLeft+event.x-x
obj.style.posTop=document.body.scrollTop+event.y-y

3.拖曳完松开鼠标后，重设标志 down ，还原对象的 z-index并释放对它的鼠标捕捉。

down=false 
obj.style.zIndex=z 
obj.releaseCapture()

4.完整代码。

<script>
var x,y,z,down=false,obj   
function init(){
obj=event.srcElement     //事件触发对象
obj.setCapture()            //设置属于当前对象的鼠标捕捉
z=obj.style.zIndex          //获取对象的z轴坐标值
//设置对象的z轴坐标值为100，确保当前层显示在最前面
obj.style.zIndex=100
x=event.offsetX   //获取鼠标指针位置相对于触发事件的对象的X坐标
y=event.offsetY   //获取鼠标指针位置相对于触发事件的对象的Y坐标
down=true         //布尔值，判断鼠标是否已按下，true为按下，false为未按下
}

function moveit(){
//判断鼠标已被按下且onmouseover和onmousedown事件发生在同一对象上
 if(down&&event.srcElement==obj){
   with(obj.style){
/*设置对象的X坐标值为文档在X轴方向上的滚动距离加上当前鼠标指针相当于文档对象的X坐标值减

鼠标按下时指针位置相对于触发事件的对象的X坐标*/

        posLeft=document.body.scrollLeft+event.x-x
/*设置对象的Y坐标值为文档在Y轴方向上的滚动距离加上当前鼠标指针相当于文档对象的Y坐标值减

鼠标按下时指针位置相对于触发事件的对象的Y坐标*/
        posTop=document.body.scrollTop+event.y-y
   }
 }
}

function stopdrag(){
//onmouseup事件触发时说明鼠标已经松开，所以设置down变量值为false
down=false 
obj.style.zIndex=z       //还原对象的Z轴坐标值
obj.releaseCapture() //释放当前对象的鼠标捕捉
}
</script>

<div onmousedown=init() onmousemove=moveit()   onmouseup=stopdrag()
style="position:absolute;left:20;top:190;width:100;height:150;border:1px
solid #000000;z-index:1;background:#eeeeee">Layer 1</div>
<div onmousedown=init() onmousemove=moveit() onmouseup=stopdrag()
style="position:absolute;left:60;top:10;width:100;height:150;border:1px
solid #000000;z-index:2;background:#eeeeee">Layer 2</div>
<div onmousedown=init() onmousemove=moveit() onmouseup=stopdrag()
style="position:absolute;left:100;top:90;width:100;height:150;border:1px
solid #000000;z-index:3;background:#eeeeee">Layer 3</div>

注意：只有 CSS 的 position 属性值为 absolute 的对象才能进行拖动操作。
提示：如果需要将拖曳组件化，可以参考第二部分HTC一节。
技巧：可以在 init() 函数中加一句 event.cancelBubble=true ，以取消在该对象上的事件冒泡。
试一试：读者可以试着实现移动其他对象，例如移动一个图片或文本框。
特别提示
在拖曳对象前必须确保该对象的为绝对定位的，把上面的完整代码保存就可以看到效果了，
在实际就用时务必在对象上加上 onmousedown、onmousemove和onmouseup三个事件并触发相应函数。

代码运行效果如图 3.8 所示。

图 3.8 可拖动的层

特别说明

本例需要掌握的技巧比较多，捕捉鼠标，获取鼠标位置(相当于对象)，释放鼠标捕捉，文档的滚动距离还有with 语句。
1.       setCapture() 设置属于当前文档的对象的鼠标捕捉。
2.       event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
3.       event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
4.       releaseCapture() 释放当前文档中对象的鼠标捕捉。
5.       scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。
6.       scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
7.       with 为一个或多个语句设定默认对象。

 // 表格ID参数验证
  if(!str_tableid) return alert(str_tableid+"表格不存在");
 var obj_tables=(document.all ? document.all[str_tableid]:document.getElementById(str_tableid));
 if(!obj_tables) return alert("ID为("+str_tableid+")不存在！");

 // 设置个参数的缺省值
  var col_config=[];
 col_config.header_offset=(num_header_offset?num_header_offset:0 );
 col_config.odd_color=(str_odd_color?str_odd_color:'#ffffff');
 col_config.even_color=(str_even_color?str_even_color:'#dbeaf5');
 col_config.mover_color=(str_mover_color?str_mover_color:'#6699cc');
 col_config.onclick_color=(str_onclick_color?str_onclick_color:'#4C7DAB');
 // 初始化表格（可能多个表格用同一个ID）
  if(obj_tables.length)
  for(var i=0;i<obj_tables.length;i++ )
 tt_init_table(obj_tables[i],col_config);
 else
 tt_init_table(obj_tables,col_config);
}
 
 function tt_init_table(obj_table,col_config)  {
 var col_lconfig=[],
 col_trs=obj_table.rows;
 if(!col_trs) return ;
 
 for(var i=col_config.header_offset;i<col_trs.length;i++)  { // i 从 表头以下开始
  col_trs[i].config=col_config;
 col_trs[i].lconfig=col_lconfig;
 col_trs[i].set_color=tt_set_color;
 col_trs[i].onmouseover=tt_mover;
 col_trs[i].onmouseout=tt_mout;
 col_trs[i].onmousedown=tt_onclick;
 col_trs[i].order=(i-col_config.header_offset)%2 ;
 col_trs[i].onmouseout();
 }
}
 function tt_set_color(str_color) {
 this.style.backgroundColor=str_color;
}
 
 // 事件操作
 function tt_mover() {
 if(this.lconfig.clicked!=this )
  this.set_color(this.config.mover_color);
}
 function tt_mout() {
 if(this.lconfig.clicked!=this )
  this.set_color(this.order?this.config.odd_color:this.config.even_color);
}
 function tt_onclick()  {
 if( this.lconfig.clicked==this) {
  this.lconfig.clicked=null;
  this.onmouseover();
 }
  else {
  var last_clicked=this.lconfig.clicked;
  this.lconfig.clicked=this ;
  if(last_clicked) last_clicked.onmouseout();
  this.set_color(this.config.onclick_color);
 }
}
 
</script>
</head>

<body>
<table bgcolor="#9933ff" align="center" cellpadding="1" cellspacing="0" width="80%">
 <tr>
 <td>
 <table id="demo" cellpadding="1" cellspacing="1" border="0" width="100%" align="center">
 <tr><th colspan="2" bgcolor="ffffff">HTML document object properties</th></tr>
 <tr><td width="20%">activeElement</td><td>Retrieves the object that has the focus.</td></tr>
 <tr><td>aLinkColor</td><td>Sets or retrieves the color of all links in the document.</td></tr>
 <tr><td>bgColor</td><td>Sets or retrieves the background color behe document object.</td></tr>
 <tr><td>body</td><td>Specifies the beginning and end of the document body.</td></tr>
 <tr><td>contentEditable</td><td>Sets or retrieves whether the userdocument object.</td></tr>
 <tr><td>cookie</td><td>Sets or retrieves the string value of a cookie.</td></tr>
 <tr><td>defaultCharset</td><td>Sets or retrieves the default chara of the document.</td></tr>
 <tr><td>designMode</td><td>Sets or retrieves whether the document can be edited.</td></tr>
 <tr><td>documentElement</td><td>Retrieves a reference to the root node of the document.</td></tr>
 <tr><td>domain</td><td>Sets or retrieves the security domain of the document.</td></tr>
 </table>
 </td>
 </tr>
 </table>
 <script language="JavaScript">
  anole('demo',1,'#ffffff','#ccccff','#ffccff','#cc99ff');
 </script>
</body>
</html>

From Index：http://www.cnitblog.com/yemoo/archive/2006/06/16/12362.html

Owner

接下来文章中我们将要讨论的问题是：在函数doSomething()中this所指的是什么？

function  doSomething()  {
   this .style.color  =  '#cc0000';
}

element.onclick  =  doSomething;

这个函数被完整复制到onclick属性（现在成为了函数）。因此如果这个event handler被执行，this将指向HTML元素，并且该元素的颜色得以改变。

这种方法使得我们能够复制这个函数到多个event handler。每次this都将指向正确的HTML元素：

这样你就可以最大限度使用this。每当执行该函数，this所指向的HTML元素都正确响应事件，这些HTML元素拥有doSomething()的一个拷贝。

Referring

然而，如果你使用inline event registration(内联事件注册)

<element onclick="doSomething()">

你将不能拷贝该函数！反而这种差异是非常关键的。onclick属性并不包含实际的函数，仅仅是一个函数调用。

doSomething();

因此，它将声明“转到doSomething()并且执行它”。当我们到达doSomething()，this关键字又重新指向了全局的window对象，函数返回错误信息。

The difference

如果你想使用this来指向HTML元素响应的事件，你必须确保this关键字被写在onclick属性里。只有在这种情况下它才指向event handler所注册的HTML元素。
 

element.onclick = doSomething;
alert(element.onclick)

你将得到

function doSomething() {
  this.style.color = '#cc0000';
}

正如你所见，this关键字被展现在onclick函数中，因此它指向HTML元素。
但是如果执行

<element onclick="doSomething()">
alert(element.onclick)

你将得到

function onclick() {
  doSomething()
}

这仅仅是到doSomething()函数的一个引用。this关键字并没有出现在onclick函数中，因此它不指向HTML元素。

AJAX的JavaScript的反射机制,反射机制指的是程序在运行时能够获取自身的信息。例如一个对象能够在运行时知道自己有哪些方法和属性。 在JavaScript中利用for(…in…)语句实现反射，其语法如下：

for(var p in obj){
//语句
}

在Ajax编程中，经常要能动态的改变界面元素的样式，这可以通过对象的style属性来改变，比如要改变背景色为红色，可以这样写：
element.style.backgroundColor="#ff0000";

基本上CSS里拥有的属性在JavaScript中都能够使用：
function setStyle(_style){
//得到要改变样式的界面对象
var element=getElement();
element.style=_style;
}

直接将整个style对象作为参数传递了进来：
var style={
color:#ffffff,
backgroundColor:#ff0000,
borderWidth:2px
}

这时可以这样调用函数：
setStyle(style);

或者直接写为：
setStyle({ color:#ffffff,backgroundColor:#ff0000,borderWidth:2px});

这段代码看上去没有任何问题，但实际上，在setStyle函数内部使用参数_style为element.style赋值时，如果element原先已经有了一定的样式，例如曾经执行过：
element.style.height="20px";

而_style中却没有包括对height的定义，因此element的height样式就丢失了，不是最初所要的结果。要解决这个问题，可以用反射机制来重写setStyle函数：
function setStyle(_style){
//得到要改变样式的界面对象
var element=getElement();
for(var p in _style){
element.style[p]=_style[p];
}
}

程序中遍历_style的每个属性，得到属性名称，然后再使用方括号语法将element.style中的对应的属性赋值为_style中的相应属性的值。从而，element中仅改变指定的样式，而其他样式不会改变，得到了所要的结果。^-^

    Microsoft Script Debugger: 集成在IE中的一款很原始的调试工具，具备基本的调试功能，除了可以用于调试客户端脚本，还能调试在Microsoft IIS上运行的服务器端脚本。该工具命令窗口是基于文本的，针对VBScript和IE环境进行调试会更加适用。
 
    Firefox JavaScript Console: 可以记录JavaScript中出现的所有警告和错误，诊断出大多数错误。工具比较简单实用。
 
    Venkman: 一个基于Mozilla的浏览器的JavaScript调试环境，是Mozilla浏览器的一个扩展。Venkman基于Mozilla JavaScript调试API（js/jsd），js/jsd API 构成了 Netscape JavaScript Debugger 1.1的基础，Netscape浏览器4.x系统都提供了这个调试工具。Venkman是目前比较流行的JavaScript调试工具。

    相关下载：
    http://www.hacksrus.com/~ginda/venkman/
    上面最新的版本是0.9.85，对于Firefox只能支持1.5以前的版本。
    https://dwr.dev.java.net/files/documents/2427/22010/venkman-0.9.85.jw2.xpi
    venkman-0.9.85.jw2.xpi是venkman-0.9.85xpi的修改版本，可以支持Firefox 1.5.0。 
    https://addons.mozilla.org/firefox/216/
    在Mozilla官方站点上，venkman有了另外的一个名称——JavaScript Debugger，已经发布了0.9.87版本，支   持Firefox 0.9-3.0，Mozilla 1.0-1.8，Thunderbird 0.9-3.0的所有版本浏览器。
    除了官方网站外，该工具的扩展安装也可以通过链接
    http://www.blogjava.net/Files/flyingis/javascript_debugger-0.9.87.rar进行本地下载。
 
    另外有一些JavaScript专用IDE，有兴趣可以试用一下：
 
    Cardinal JavaScript IDE:
   
    JavaScript IDE for Eclipse:
   
    JavaScript IDE(共享软件):

----------------------------------------------------------------------------------------------------

本人现在用的是firebug，是一个非常好的小工具集合，它的一些小功能非常方便。比以上的都好....