一个可拖动div的例子

<! 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"  lang ="gb2312" >
< head >
< title >  代码实例：拖动对象 Drag Object (兼容:IE、Firefox、Opera ... ) </ title >
< meta  http-equiv ="content-type"  content ="text/html; charset=gb2312"   />
< meta  name ="editor"  content ="枫岩,http://www.cnlei.com" >
< meta  name ="keywords"  content ="代码实例：拖动对象" >
< meta  name ="description"  content ="最简短的拖动对象代码实例演示" >
< style >
.dragAble  { position : relative ; cursor : move ; }
</ style >
< script  language ="javascript" >
<!--
//  Author:  Unkonw
//  Modify:  枫岩@CnLei.com
var  ie = document.all;
var  nn6 = document.getElementById &&! document.all;
var  isdrag = false ;
var  y,x;
var  oDragObj;

function  moveMouse(e) {
  if  (isdrag) {
 oDragObj.style.top   =   (nn6  ?  nTY  +  e.clientY  -  y : nTY  +  event.clientY  -  y) + " px " ;
 oDragObj.style.left   =   (nn6  ?  nTX  +  e.clientX  -  x : nTX  +  event.clientX  -  x) + " px " ;
  return   false ;
 }
}

function  initDrag(e) {
  var  oDragHandle  =  nn6  ?  e.target : event.srcElement;
  var  topElement  =   " HTML " ;
  while  (oDragHandle.tagName  !=  topElement  &&  oDragHandle.className  !=   " dragAble " ) {
 oDragHandle  =  nn6  ?  oDragHandle.parentNode : oDragHandle.parentElement;
 }
  if  (oDragHandle.className == " dragAble " ) {
 isdrag  =   true ;
 oDragObj  =  oDragHandle;
 nTY  =  parseInt(oDragObj.style.top + 0 );
 y  =  nn6  ?  e.clientY : event.clientY;
 nTX  =  parseInt(oDragObj.style.left + 0 );
 x  =  nn6  ?  e.clientX : event.clientX;
 document.onmousemove = moveMouse;
  return   false ;
 }
}
document.onmousedown = initDrag;
document.onmouseup = new  Function( " isdrag=false " );
// -->
</ script >
</ head >
< body >
< img  src ="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif"  class ="dragAble"   />
< img  src ="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif"  class ="dragAble"   />
< img  src ="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif"  class ="dragAble"   />< br  />< br  />
< div  style ="border:1px solid #ff6d00;background:#ffd801;width:240px;padding:5px 0;"  class ="dragAble" > 这些都是可拖动对象 </ div >
</ body >
</ html >  

 

 不是很好看 暂且做个教材吧