I have two TextBoxes to determine date selections (from date and to date). I am using Calender and let user select the desired dates. I am using the <Calendar.SelectedDate> method and it works fine. However, is there a way where the user can drag the mouse to the selected TextBox field they want to populate or select which text box field they want to fill ?

Using Client-side Script to Focus Controls in ASP.NET

1: Pseudo-code to focus the same control on the client.
<script language="javascript">
var control = document.getElementById(<control name>);
if( control != null ){ control.focus(); }
</script>

Registering the Startup Script
ASP.NET pages contain a method named RegisterStartupScript. By invoking Page.RegisterStartupScript, we can inject a block of script that will run just before the page is rendered in the browser. The arguments we need to pass to RegisterStartupScript are a unique name for the script block and a properly formatted block of script.
Listing 2: The implementation of SetFocusControl.
Public Sub SetFocusControl(ByVal ControlName As String)
' character 34 = "

Dim script As String = _
"<script language=" + Chr(34) + "javascript" + Chr(34) _
+ ">" + _
" var control = document.getElementById(" + Chr(34) + _
ControlName + Chr(34) + ");" + _
" if( control != null ){control.focus();}" + _
"</script>"

Page.RegisterStartupScript("Focus", script)
End Sub

You asked specifically about dragging and dropping. This is possible with Internet Explorer and JavaScript. Note: these events and methods are part of the IE DOM, they are not server-side ASP.NET.

The relevant event handlers:

ondragstart

This is the "starting event" for dragging. It initiates the drag, and it's also where you provide a "value" to move to the drag target.

ondrag

Fires the entire time you're dragging.

ondragenter, ondragover, ondragleave
You can basically know 1) They entered the target, 2) they are hovering around on the target and 3) they left the target without dropping.

ondragend

When the user drops the object, regardless of whether it is dropped on the drop target or not. Fires on the dragged object.

ondrop

Fires when the object is dropped on the drop target. When this happens, the ondrop event fires before the ondragend event.

To transfer data, there are two methods:

setData() and getData()

You should be able to figure out the rest. When the dragging starts, you setData. When it drops, you getData.

Again, this is only for IE!

Thomas D. Greer
http://www.tgreer.com

My standard plug: if this post helped, please support the site by clicking ads. My personal site is also advertiser supported. Click Ads!

Did this work for you? Do you need anymore help? Give us some feedback.