简单实现可拖动div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Expires" content="0"><head><script>window.onload=function(){var d=document.getElementById('div1');if(document.addEventListener) {document.addEventListener("mousemove",moveHandler,true);document.addEventListener("mouseup",upHandler,true); }else{document.attachEvent("onmousemove",moveHandler);document.attachEvent("onmouseup",upHandler); }d.onmouseup=addE;function moveHandler(e){if (!e) e=window.event;d.style.left=e.clientX+'px';d.style.top=e.clientY+'px';}function upHandler(e) { if(document.removeEventListener) { document.removeEventListener("mouseup",upHandler,true); document.removeEventListener("mousemove",moveHandler,true); } else { document.detachEvent("onmouseup",upHandler); document.detachEvent("onmousemove",moveHandler); }if(e.stopPropagation) e.stopPropagation(); else e.cancelBubble=true; }function addE(){if(document.addEventListener) {document.addEventListener("mousemove",moveHandler,true);document.addEventListener("mouseup",upHandler,true); }else{document.attachEvent("onmousemove",moveHandler);document.attachEvent("onmouseup",upHandler); }}}</script></head><body><div id='div1' style='left:80px;top:100px;position:absolute;width:80px;background:#aaaaaa;'>here!</div></body></html>
主要利用了mousemove和mouseup事件。当然，还要注意事件处理的方式，这里禁用了冒泡。
mousemove:鼠标每移动一个像素，就会触发一次事件。