js 拖拽实例
function drag(elementToDrag,event){ var startX=event.clientX,startY=event.clientY; var origX = elementToDrag.offsetLeft,origY = elementToDrag.offsetTop; var deltaX=startX-origX,deltaY=startY-origY; if(document.addEventListener){ document.addEventListener("mousemove",moveHandler,true); document.addEventListener("mouseup",upHandler,true); }else if(document.attachEvent){ elementToDrag.setCapture(); elementToDrag.attachEvent("onmousemove",moveHandler); elementToDrag.attachEvent("onmouseup",upHandler); elementToDrag.attachEvent("onlosecapture",upHandler); }else{ var oldmovehandler=document.onmousemove; var olduphandler=document.onmouseup; document.onmousemove=moveHandler; document.onmouseup=upHandler; } if(event.stopPropagation) event.stopPropagation(); else event.cancelBubble=true; if(event.preventDefault) event.preventDefault(); else event.returnValue=false; function moveHandler(e){ if(!e) e=window.event; elementToDrag.style.left=(e.clientX-deltaX)+'px'; elementToDrag.style.top=(e.clientY-deltaY)+'px'; if(e.stopPropagation) e.stopPropagation(); else{ e.cancelBubble=true;} }function upHandler(e){ if(!e) e=window.event; if(document.removeEventListener){ document.removeEventListener('mouseup',upHandler,true); document.removeEventListener('mousemove',moveHandler,true); }else if(document.detachEvent){ elementToDrag.detachEvent('onloasecapture',upHandler); elementToDrag.detachEvent('onmouseup',upHandler); elementToDrag.detachEvent('onmousemove',moveHandler); elementToDrag.releaseCapture(); }else{ document.onmouseup=olduphandler;document.onmousemove=oldmovehandler; } if(e.stopPropagation) e.stopPropagation(); else e.cancelBubble=true;}}<script src="Drag.js"></script><div style='position:absolute;left:100px;top:100px;width:250px;background-color:white;border:solid black;'><div style='background-color:gray;broder-bottom:dotted black;padding:3px;font-family:sans-serif;font-weight:bold;' Onmousedown="drag(this.parentNode,event);">drag me <!-- the content of the titlebar--></div> <!--content of the draggable element--> <p>this is a test .testing testing testing<p>this is test.<p>Test.</div>?