Sharing: simple code and compatible with the drag layer of multiple browsers

  1   <!  Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  >  
  2      <  Html  Xmlns  = "Http://www.w3.org/1999/xhtml"  > 
  3      <  Head  >  
  4      <  Title  >  CodeVery simple and compatible with the drag layer of multiple browsers  </  Title  >  
 5   </  Head  >  
  6   <  Body  >  
  7   <  Div  ID  = "F"  Style = "Position: absolute; width: 500px; Height: 350px; Background-color: # CCC; top: 150px; left: 200px; Z-index: 101; Border: solid 1px blue ;"  >  
  8   <  Div  ID  = "Title"  Style  = "Background-color: Blue; cursor: move; Height: 20px; color: # FFF; font-size: 13px; padding-top: 5px; padding-left: 10px ;"  >  Here is the layer title websjy.com  </ Div  >  
  9   </  Div  >  
  10   
  11   <  Script  Type  = "Text/JavaScript"  >  
 12   VaR  Posx;
  13   VaR  Posy;
  14   Fdiv  =  Document. getelementbyid (  "  F "  );
  15   Document. getelementbyid (  "  Title  "  ). Onmousedown  =  Function  (E)
  16  {
  17     If  (  !  E) E  =  Window. event;
  18   Posx  = E. clientx  -  Parseint (fdiv. style. Left );
  19   Posy  =  E. clienty  -  Parseint (fdiv. style. Top );
  20   Document. onmousemove =  Mousemove;
  21   }
  22   Document. onmouseup  =     Function  ()
  23   {
  24  Document. onmousemove  =     Null  ;
  25   }
  26   Function  Mousemove (EV)
  27   {
  28    If  (EV  =  Null  ) EV  =  Window. event;
  29   Fdiv. style. Left  =  (EV. clientx -  Posx)  +     "  Px  "  ;
  30   Fdiv. style. Top  =  Ev. clienty -  Posy  +     "  Px  "  ;
  31   }
  32   </  Script  > 
  33   </  Body  >  
  34   </  Html  > 

 

View demo results