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>