マウスでドラッグできるDIV実装の考え方とコード

 
  
 
  
 
  
 
  <br>var offset_x; 
  <br>var offset_y; 
  <br>function Milan_StartMove(oEvent) 
  <br>{ 
  <br>var whichButton; 
  <br>if(document.all&&oEvent.button==1) whichButton=true; 
  <br>else { if(oEvent.button==0)whichButton=true;} 
  <br>if(whichButton) 
  <br>{ 
  <br>var oDiv=document.getElementById("oDiv"); 
  <br>offset_x=parseInt(oEvent.clientX-oDiv.offsetLeft); 
  <br>offset_y=parseInt(oEvent.clientY-oDiv.offsetTop); 
  <br>document.documentElement.onmousemove=function(mEvent) 
  <br>{ 
  <br>var eEvent; 
  <br>if(document.all) eEvent=event; 
  <br>else{eEvent=mEvent;} 
  <br>var oDiv=document.getElementById("oDiv"); 
  <br>var x=eEvent.clientX-offset_x; 
  <br>var y=eEvent.clientY-offset_y; 
  <br>oDiv.style.left=(x)+"px"; 
  <br>oDiv.style.top=(y)+"px"; 
  <br>} 
  <br>} 
  <br>} 
  <br>function Milan_StopMove(oEvent){document.documentElement.onmousemove=null; } 
  <br> 
  
 
  
 
  
 
  
style="cursor:move;position:absolute;width:100px;height:60px;border:1px solid 
  
 
  
silver;left:100px;top:100px;z-index:9999;">
 
  
 
  
 
 

document.all[]は、ドキュメント内のすべてのラベルからなる配列変数であり、ドキュメントオブジェクト内のすべての要素を含む.
event.buttonの値:0キーなし1キー左キー2キー右キー3キー左と右キー4キー中間キー5キー左と中間キー6キー右と中間キー7キーすべて
次はこのコードを改良してwindowを真似してselectを覆うことができます

 
  
 
  
 
  
 
  
 
  
 
  <br>var offset_x; 
  <br>var offset_y; 
  <br>function Milan_StartMove(oEvent,div_id) 
  <br>{ 
  <br>var whichButton; 
  <br>if(document.all&&oEvent.button==1) whichButton=true; 
  <br>else { if(oEvent.button==0)whichButton=true;} 
  <br>if(whichButton) 
  <br>{ 
  <br>var oDiv=div_id; 
  <br>offset_x=parseInt(oEvent.clientX-oDiv.offsetLeft); 
  <br>offset_y=parseInt(oEvent.clientY-oDiv.offsetTop); 
  <br>document.documentElement.onmousemove=function(mEvent) 
  <br>{ 
  <br>var eEvent; 
  <br>if(document.all) eEvent=event; 
  <br>else{eEvent=mEvent;} 
  <br>var oDiv=div_id; 
  <br>var x=eEvent.clientX-offset_x; 
  <br>var y=eEvent.clientY-offset_y; 
  <br>oDiv.style.left=(x)+"px"; 
  <br>oDiv.style.top=(y)+"px"; 
  <br>var d_oDiv=document.getElementById("disable_"+oDiv.id); 
  <br>d_oDiv.style.left=(x)+"px"; 
  <br>d_oDiv.style.top=(y)+"px"; 
  <br>} 
  <br>} 
  <br>} 
  <br>function Milan_StopMove(oEvent){document.documentElement.onmousemove=null; } 
  <br>function div_Close(o) 
  <br>{var oDiv=o; oDiv.style.display="none";var d_oDiv=document.getElementById("disable_"+o.id);d_oDiv.style.display="none";} 
  <br> 
  
 
  
 
  
 
  
style="cursor:move;width:100%;height:15px;background-color:#0066cc; font-size:10px;"> 
  
X