I have published a Drag and Drop application for a Window form on the Code Project where you can drag a picture and store the position in a database and retrieve it later. You can find it here drag_and_drop_winforms.aspx.
What is implemented in the application?
- The use of an access database.
- SQL calls to Insert, update, delete and read from a database.
- The code to add, move, and delete a textbox on the page and from the database.
- The use of AJAX
How it Works
This function drags the object on the screen by calculating the
y values. There are many other similar scripts on the net, but I found this one easy to use.
The next one is the mouse down script, or
WhitchElement as it is called here. I also found this one on the net, but I have modified it to suit my needs.
else if (e.srcElement)
This script is detecting which control is clicked and gives us the ID of this control. What we do here is to pass this ID into a textbox control named id and every time a control is clicked we add the new ID to the textbox with a space between each ID.
this one I was able to figure out myself after looking at the drag script.
This script is detecting the x and y position of the control when the control is dragged to the right position and the mouse goes up. What we do here is to pass the
y values into a textbox named
xpos and a textbox named
ypos and every time a control is clicked we add the new x and y position to the textbox with a space between each x and y value.
Page_LoadComplete procedure and it goes like this.
Protected Sub Page_LoadComplete(ByVal sender As Object,
ByVal e As System.EventArgs) Handles Me.LoadComplete
selectString = "SELECT * FROM tblxy"
cmd = New OleDbCommand(selectString, conn)
reader = cmd.ExecuteReader()
Dim textBox As TextBox = New TextBox()
textBox.ID = reader.Item("Id")
textBox.Text = reader.Item("Name").ToString
textBox.Style.Value = "left: " & reader.Item("xpos") &
"px; position: absolute; top: " & reader.Item("ypos") & "px"
textBox.CssClass = "drag"
What we are doing here is that we are reading from the database every time the site post back and we are creating every control at runtime each time. The controls ID are set to the id of the position in the database. The controls text is the name of the student, and then we set the style property. The most important with the style property is to use
position: absolute, and also add the attributes drag,
onmouseup and finally add the textbox to the page at the same position as it was stored.
This application runs on Internet Explorer, but I know it is not working in FireFox. I have not tested it width other browsers, but I’m quite sure that we have members at the codeproject community that can help us with this issue. If there are any readers that have suggestions on how to make this application to work on other platforms their contribution are most welcome.
I know my SQL commands are using concatenating (unchecked) parameters, but that is not an issue with this article