层拖动效果
<!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;}
.dragAble </style><script language="javascript">
<!--// Author: Unkonw// Modify: 枫岩@CnLei.comvar 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>