最少代码的可拖动DIV以前在网上看到的最简单的拖动对象的代码，忘记作者叫什么了。原始代码在IE下有些小问题，并且声明了文档类型为xhtml 1.0后，在FF等非IE浏览器下无效，对其进行了改进，现在已经可兼容:IE、Firefox、Opera ...
以下代码只是演示原理，具体应用请结合你自己的实际需求进行修改。 <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./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."> <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./images/user_icons/2006/10/01/u_35653.gif" class="dragAble" /> <img src="http://www./images/user_icons/2006/10/01/u_35653.gif" class="dragAble" /> <img src="http://www./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> |
|
|
