Javascript + + CSS DIV achieving drag information form

Posted by john
4/26/2007
Related Tags:
CSS DIV  div css  div css Guide  div css layout  div class  div location  div borders  div position  div positioning  div height  div align  div layer  not-for-div trip div span  div background  div layout  div rolling  div select  div effects  div around div width  div ul  div flash  div nbsp  div manuals  div usage  div site  div parameters  div interface  div nested  div top  div width  div border  div style  div onmouseover  div visibility  the body div  div skills  div framework  w3c form w3c detection  div css tutorial  css form css links css table  css javascript  css map download div 

<html>
<head>
<style>
  (Div #    ) (Width: 300px; height: 200px; Color = red;-top border: 1px solid # 000 border-bottom: 1px solid # 000 border-left: 1px solid # 000 border-right: 1px solid # 000; size = 13px; position: absolute; bottom: 50px; right = 80px;) 

  </ Style> 
  </ Head> 

<body>
  <script Language="javascript"> 
  Var moveable = false; 
  Function aa (val) 
  ( 
  Var obj = document.getElementById ( "div"); 
  If (val == 0) 
  ( 
  Obj.style.display = ""; 
  Var x, y; 

  X = event.clientX; 
  Y = event.clientY; 

  Obj.style.left = x; 
  Obj.style.top = y; 
  / / Alert ( "X:" + x + "Y:" + y); 
  ) 
  Else 
  Obj.style.display = "none"; 
  ) 
  Function startgrap (obj) 
  ( 
  If (event.button == 1) 
  ( 
  Obj.setCapture (); 
  / / Record layer and the location of the mouse; 
  X0 = event.clientX; 
  Y0 = event.clientY; 
  X1 = parseInt (obj.style.left); 
  Y1 = parseInt (obj.style.top); 
  Moveable = true; 
  ) 
  ) 
  Function stopgrap (obj) 
  ( 
  If (moveable) 
  ( 
  Obj.releaseCapture ();// to release the mouse capture 
  Moveable = false; 
  ) 
  ) 
  Function grap (obj) 
  ( 
  If (moveable) 
  ( 
  Obj.style.left = x1 + event.clientX - x0; 
  Obj.style.top y1 = + event.clientY - y0; 
  ) 
  ) 
  </ Script> 
  <form Id="form1"> 
  <input Type=button value="DIV应用" onmousemove="aa(0);"> 
  <div Id="div2" style="background:#ff00cc;width=100px;" onmousemove="aa(0);"> mouse moved to the top try </ div> 
  <div Id="div" style="display:none" onmousedown="startgrap(this);" onmouseup="stopgrap(this);" onmousemove="grap(this);"> 
  <div Style="border-top:1px solid red;position:absolute;right=1px;"> <span onclick="aa(1);" style="cursor:hand"> <font color = "# eee" > <b> closed </ b> </ font> </ span> </ div> 
  <span> I Like you, do you know? <br> If you don `t know, now i tell you, i tell you! <br> <br> Transparent window, drag </ span> 
  </ Div> 
  </ Form> 

  </ Body> 
  </ Html> 




Related articles:

Layer translucent effect css effects
  Layer translucent effect css effects  ============================================   Code 1:    . Header (    Width: 760px;    Margin-right: auto;    Margin-left: auto;    Padding: 0px;    Height: 120px;  &nb...
About a rolling code
  <div Style="width:200px;overflow:hidden">    <div Style="position:relative;top:0px;left:0px;white-space:nowrap" id=news>    <span Id=nbo> news content of a news content 2 news content 3 news content 4 news content 5 news content 6 &l...
Dreamweaver MX 2004 Video Collection Guide (67)
  Section 67 sets: the advantages of CSS    Course Objectives: To the several advantages CSS    Curriculum points: What are the advantages of CSS?    Generally speaking, it has the following three advantages:    First, a group can call in the form of m...
Ajax study notes [zt]
  Finally, the time Xiediandongxi a few days ago, the IBM Web sites developerWorks China, see Brett McLaughlin wrote an article on Ajax (http://www-128.ibm.com/developerworks/cn/xml / wa-ajaxintro1.html).    After reading, summed up what:    Ajax (Asynchronous JavaScript a...
Does your site in the abuse of All rights reserved
  Many station or Web page production staff will be very natural in the bottom of the page, "All rights reserved."    In such a legal system is not perfect state may not be affected, let alone the Internet.    However, as Internet-related laws or lawsuits related ...