javascript 拽拉效果 供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> <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需刷新才能执行]