Drag and Drop on webform

Code:/files/zhuqil/draganddrop.rar (C #)

1. Access Database

2. Use SQL statements to insert, update, delete, and read databases.

3. Drag textbox on a web page using JavaScript

4. Add, move, and delete textbox on the page and database
First, we must create javascript code for processing events. These events are drag, mouse down, and mouse up. On the Internet, I found the code for handling the drag and drop event:

Code

<Style>

. Drag {position: relative; cursor: hand}

</Style>

<Script language = "JavaScript">
<! --
/* Credit JavaScript kit www.javascriptkit.com */
VaR dragapproved = false
VaR Z, X, Y
Function move (){
If (event. Button = 1 & dragapproved ){
Z. style. pixelleft = temp1 + event. clientx-x
Z. style. pixeltop = temp2 + event. clienty-y
 
Return false
}
}
Function drags (){
If (! Document. All)
Return
If (event. srcelement. classname = "drag "){
Dragapproved = true
Z = event. srcelement
Temp1 = Z. style. pixelleft
Temp2 = Z. style. pixeltop
X = event. clientx
Y = event. clienty
Document. onmousemove = move
}
}
Document. onmousedown = drags
Document. onmouseup = new function ("dragapproved = false ")
// -->
</SCRIPT>

On the screen, the function calculates the values of X and Y to drag the object. There are many other similar code on the Internet, but I found this method is very easy to use. Next is the mouse down script. whitchelement is called here. I found it online, but I modified it to meet my own needs.

Code

<SCRIPT type = "text/JavaScript">
/* Find witch element was clicked */
Function whichelement (E)
{
VaR targ;
If (! E)
{
VaR E = Window. event;
}
Else if (E. srcelement)
{
Targ = E. srcelement;
}
If (E. Button = 1)
{
Myname = targ. ID;
Document. getelementbyid ('<% = ID. clientid %>'). value = Document. getelementbyid (
'<% = ID. clientid %>'). Value + ''+ myname;
}
}
</SCRIPT>

This script detects which control is clicked and sends the ID of the control to us. All we need to do is pass this ID to the Textbox Control named ID. Each time the control is clicked, a new ID is added, and each ID is separated by spaces.
After the mouse up script is completed, I admit that I am not good at JavaScript, but I still can understand the drag script.

Code

<SCRIPT type = "text/JavaScript">
VaR Z
Function mymouseup (Event)
{
X = Z. style. pixelleft;
Y = Z. style. pixeltop;
Document. getelementbyid ('<% = xpos. clientid %>'). value = Document. getelementbyid (
'<% = Xpos. clientid %>'). Value + ''+ X;
Document. getelementbyid ('<% = ypos. clientid %>'). value = Document. getelementbyid (
'<% = Ypos. clientid %>'). Value + ''+ Y;
}
</SCRIPT>

When the control is dragged to a proper position, let go of the mouse, this script detects the value of the X and Y coordinates of the control. Then, the X and Y values are passed to a textbox named xpos and a textbox named ypos. Each time the control is clicked, a new position of X and Y is added to the textbox, leaving a space between the x and y values.
The above is part of the Javascript script. The rest is the location where controls are stored in the database. The position of the control is retrieved between each sending and receiving request, so that the user cannot see the sending and receiving request. I must use Ajax. The most important thing is page_loadcomplete processing.

Code

Conn. open ();
Selectstring = "select * From tblxy ";
Cmd = new oledbcommand (selectstring, Conn );
Reader = cmd. executereader ();

While (reader. Read ())
{
Textbox = new Textbox ();
Textbox. ID = reader ["ID"]. tostring ();
Textbox. Text = reader ["name"]. tostring ();
Textbox. style. value = "Left:" + reader ["xpos"] + "PX; position: absolute; top:" + reader ["ypos"] + "PX ";
Textbox. cssclass = "drag ";
Textbox. Attributes. Add ("onmousedown", "whichelement (event )");
Textbox. Attributes. Add ("onmouseup", "mymouseup (event )");
Myplaceholder. Controls. Add (textbox );
}
Reader. Close ();
Conn. Close ();

What we do here is that every time the website returns, we read the database. Create a control at runtime. In the database, the Control ID corresponds to the Database ID field. The text of the control corresponds to the name field of the database, and then we set the attribute style. The most important style attributes are position: absolute. Add the drag and drop attributes, onmousedown and onmouseup. The location where textbox is added to the page is the same as that stored in the database.

The remaining code is common SQL read, insert, update, and delete operations. We use JavaScript to pass the values of ID, X, and Y to textbox. Split the text of textbox and use the SQL update and delete commands to update them to the database.

Currently, this program can only be run in IE and cannot be run in Firefox. I have not tested it in other browsers. If you are interested, you can complete it together.

Http://www.codeproject.com/KB/vb/drag_and_drop_web.aspx ()