網頁最簡短的拖動對象代碼實例演示

　　以前在網上看到的最簡單的拖動對象的代碼忘記作者叫什麼了原始代碼在IE下有些小問題並且聲明了文檔類型為xhtml 後在FF等非IE浏覽器下無效對其進行了改進現在已經可兼容:IEFirefoxOpera

　　以下代碼只是演示原理具體應用請結合你自己的實際需求進行修改

<!doctype html public //WC//DTD XHTML  Transitional//EN transitionaldtd>
<html xmlns= lang=gb>
<head>
<title> 代碼實例拖動對象 Drag Object (兼容:IEFirefoxOpera  )</title>
<meta httpequiv=contenttype content=text/html; charset=gb />
<meta name=editor content=楓巖>
<meta name=keywords content=代碼實例拖動對象>
<meta name=description content=最簡短的拖動對象代碼實例演示>
<style>
dragAble {position:relative;cursor:move;}
</style>
<script language=javascript>
<!
// Author:  Unkonw
// Modify:  楓巖
var ie=documentall;
var nn=documentgetElementById&&!documentall;
var isdrag=false;
var yx;
var oDragObj;

function moveMouse(e) {
if (isdrag) {
oDragObjstyletop  =  (nn ? nTY + eclientY  y : nTY + eventclientY  y)+px;
oDragObjstyleleft  =  (nn ? nTX + eclientX  x : nTX + eventclientX  x)+px;
return false;
}
}

function initDrag(e) {
var oDragHandle = nn ? etarget : eventsrcElement;
var topElement = HTML;
while (oDragHandletagName != topElement && oDragHandleclassName != dragAble) {
oDragHandle = nn ? oDragHandleparentNode : oDragHandleparentElement;
}
if (oDragHandleclassName==dragAble) {
isdrag = true;
oDragObj = oDragHandle;
nTY = parseInt(oDragObjstyletop+);
y = nn ? eclientY : eventclientY;
nTX = parseInt(oDragObjstyleleft+);
x = nn ? eclientX : eventclientX;
documentonmousemove=moveMouse;
return false;
}
}
documentonmousedown=initDrag;
documentonmouseup=new Function(isdrag=false);
//>
</script>
</head>
<body>
<img src=_//gif class=dragAble />
<img src=_//gif class=dragAble />
<img src=_//gif class=dragAble /><br /><br />
<div  class=dragAble>這些都是可拖動對象</div>
</body>
</html>
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19506.html