Drag and Drop on a Web Form

• Download DragAndDrop - 24.5 KB

Introduction

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.

Just before New Year I got a question from Matt, who had been reading my article, if I had done anything like this for the Web. He wanted to do something like a class seating plan for teachers on the net. I found this case interesting. It was 31 degrees celsius below zero this day and I had nothing else to do so I decided to give it a try. First I was searching the net to see if I could find anything about the subject. I found a JavaScript that could move the controls around on the page, but I could not find anything on how to store the positions in a database. After a while this was the result I came up with. It can be seen in action at this address http://www.abc-webcom.com/DragAndDrop/Default.aspx

What is implemented in the application?

• The use of an access database.
• SQL calls to Insert, update, delete and read from a database.
• Javascript to drag and drop a textbox on the page.
• The code to add, move, and delete a textbox on the page and from the database.
• The use of AJAX

How it Works

First we have to create some javascript to handle the events. The events are drag, mouse down and mouse up. I found the mouse drag event on the net and it goes like this.

<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>

This function drags the object on the screen by calculating the x and 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.

<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 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.

Finally we have the mouse up script. I must admit that I’m not very good with javascript, but

this one I was able to figure out myself after looking at the drag script.

<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>

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 x and 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.

And that is the JavaScript part of the story. The rest is how to store the position of the controls in a database and retrieve the positions between postbacks. I have chosen to use AJAX so the user doesn’t see the post backs. The most important is the Page_LoadComplete procedure and it goes like this.

Protected Sub Page_LoadComplete(ByVal sender As Object,
    ByVal e As System.EventArgs) Handles Me.LoadComplete
        conn.Open()
        selectString = "SELECT * FROM tblxy"
        cmd = New OleDbCommand(selectString, conn)
        reader = cmd.ExecuteReader()
 
        While reader.Read()
            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"
            textBox.Attributes.Add("onmousedown", "whichElement(event)")
            textBox.Attributes.Add("onmouseup", "mymouseup(event)")
            myPlaceHolder.Controls.Add(textBox)
        End While
        reader.Close()
        conn.Close()
 
    End Sub

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, onmousedown and onmouseup and finally add the textbox to the page at the same position as it was stored.

The rest is just common SQL read, insert, update and delete commands. However we use the ID, x and y values that have been passed from the JavaScript into the textboxes, by splitting them and inserting them to the database by using a SQL update and delete command.

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