Implementation of the wishing Wall

Some applications are the wishing walls on the Internet, that is, the users write some blessings and paste them on the internet like small notes. Many people write
They are all stacked together. You can close every small note and move it. The implementation is actually JavaScript.
The first step is to save all the messages entered by the user to the database, and then in an HTML page,
Output the content with a long string, that is

/// Random generator of the coordinate of the blessing Board
/// </Summary>
Private random indexrandom = new random ();
/// <Summary>
/// Save the output content of the page
/// </Summary>
Protected string allblessstring = string. empty;

Protected void page_load (Object sender, eventargs E)
{
If (! Page. ispostback)
{
Bindpagedata ();
}
}

Private void bindpagedata ()
{// Obtain the blessing Information
Blesswall bless = new blesswall ();
Dataset DS = bless. getblesses ();
If (DS = NULL | Ds. Tables. Count <= 0 | Ds. Tables [0]. Rows. Count <= 0) return;

Stringbuilder sbbless;
Stringbuilder sballbless = new stringbuilder ();
Int lefindex;
Int topindex;
/// Display the blessing board and the blessing Information
Foreach (datarow row in DS. Tables [0]. Rows)
{// Random start position of the generated position
Lefindex = indexrandom. Next (30,750 );
Topindex = indexrandom. Next (30,420 );

Sbbless = new stringbuilder ();
/// Construct a <div> </div> to display the blessing Board
Sbbless. append ("<Div id = \" divbless "+ row [" ID "]. tostring () +" \ "class = \" blesspanel \"");
/// Add a style
Sbbless. append ("style = \" position: absolute ;");
Sbbless. append ("Left:" + lefindex + "PX ;");
Sbbless. append ("Top:" + topindex + "PX ;");
Sbbless. append ("background-color:" + row ["backcolor"]. tostring () + ";");
Sbbless. append ("Z-index:" + row ["ID"]. tostring () + ";\"");
/// Add a mouse event
Sbbless. append ("onmousedown = \" getpanelfocus (this) \ "> ");
/// Add a table
Sbbless. append ("<Table border = \" 0 \ "> ");
Sbbless. append ("<TD style = \" cursor: Moving; \ "width = \" 98% \"");
/// Add a mouse event
Sbbless. append ("onmousedown = down (divbless" + row ["ID"]. tostring () + ")> ");
Sbbless. append ("[" + row ["showorder"]. tostring () + "] & nbsp ;");
Sbbless. append (row ["createdate"]. tostring () + "& nbsp;" + "</TD> <TD style = \" cursor: hand ;\"");
Sbbless. append ("onclick = \" ssdel () \ "width = \" 2% \ "> × </TD> </tr> ");
Sbbless. append ("<tr> <TD style = \" height: 100px; padding: 5px; \ "colspan = \" 2 \ "> ");
Sbbless. append (row ["Bless"]. tostring ());
/// Add User Name
Sbbless. append ("<Div style = \" padding: 5px; float: Right; \ ">" + row ["username"]. tostring () + "</div> </TD> </tr> </table> ");
Sbbless. append ("</div> ");
/// Append to the output string
Sballbless. append (sbbless. tostring ());
}
/// Add the content of the current blessing board to the output string
Allblessstring + = sballbless. tostring ();
}

The key is the design of each small Div.
The next step is to move and close every small piece of paper with javasrcipt.
<Script language = "JavaScript" type = "text/JavaScript">
// -- Delete control layer -->
Function ssdel ()
{
If (Event)
{
Lobj = event. srcelement;
While (lobj & lobj. tagname! = "Div") lobj = lobj. parentelement;
}
VaR id = lobj. ID
Document. getelementbyid (ID). removenode (true );
}
// -- Delete control layer -->

// -- Move the control layer -->
VaR OBJ =''
VaR Index = 10000; // The value of Z-index;
Document. onmouseup = up;
Document. onmousemove = move;
Function down (object)
{
OBJ = object. ID;
Document. All (OBJ). setcapture ();
Px = event. X-document. All (OBJ). style. pixelleft;
Py = event. Y-document. All (OBJ). style. pixeltop;
}
Function move ()
{
If (OBJ! = '')
{
Document. All (OBJ). style. Left = event. X-Px;
Document. All (OBJ). style. Top = event. Y-py;
}
}
// -- Move the control layer -->
Function up ()
{
If (OBJ! = '')
{
Document. All (OBJ). releasecapture ();
OBJ = '';
}
}
/// Obtain the focus of the blessing Board;
Function getpanelfocus (OBJ)
{
If (obj. style. zindex! = Index)
{
Index = index + 2;
VaR idx = index;
OBJ. style. zindex = idx;
}
}
</SCRIPT>