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

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

時間:2013-04-22 13:25:32   來源:   評論:加載中...   點擊:加載中...
以前在網上看到的最簡單的拖動對象的代碼,忘記作者叫什么了。原始代碼...

以前在網上看到的最簡單的拖動對象的代碼,忘記作者叫什么了。原始代碼在IE下有些小問題,并且聲明了文檔類型為xhtml 1.0后,在FF等非IE瀏覽器下無效,對其進行了改進,現在已經可兼容:IE、Firefox、Opera ...

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

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



相關熱詞搜索:

 
上一篇:JS獲取網頁中HTML元素的幾種方法分析
下一篇:解開Ajax技術中的達芬奇密碼
收藏 將此文推薦給朋友
分享到:
10个数复式三中三多少组公式