首页 > 网络编程 > JavaScript > javascript技巧 > 拽拉 javascript 拽拉效果 供JS初学者学习参考 2008-07-13 21:19:28 作者： 超精简的拽拉效果JS，并且还是同时支持IE和FF。 可以给与其他刚开始学习JS的朋友作为参考和学习。 不过这里未使用事件捕捉和释放,呵呵~ <!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"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS_拽拉效果_脚本之家</title> <style type="text/css"> div{position:absolute;width:200px;height:100px;background:#FFFADC;border:1px solid #CC6600;} </style> </head> <body> <div id="idid"></div> <script type="text/javascript"> var idid = document.getElementById('idid'); idid.onmousedown = function(bbb){ if(!bbb)bbb=window.event; var ox = bbb.layerX?bbb.layerX:bbb.offsetX; var oy = bbb.layerY?bbb.layerY:bbb.offsetY; idid.onmousemove = function(ccc){ if(!ccc)ccc=window.event; idid.style.left = ccc.clientX - ox + 'px'; idid.style.top = ccc.clientY - oy + 'px'; } idid.onmouseup = function(){ idid.onmousemove = null; } } </script> </body> </html> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
