Drag and Drop Control Extenders

After reading Jeff Prosise‘s MSDN magazine article (January 2008 edition) on Drag and Drop with ASP.NET AJAX (actually something he blogged about back in March 2007) I think the time has come to put my $0.02 on the issue. Actually it is not my $0.02 but merely a "formalization" of Jeff’s work.

I took his drag and drop implementation and created two control extenders, namely a Drag Source extender and a Drop Target extender. I added functionality to allow specifying the key/value of a drag object (i.e. which object you are actually dragging) and a key/value on the drop target (i.e. knowing where you drop the object, e.g. if a drop target is inside a repeater).

Usage is extremely simple. As always simply point the DragSourceExtender and/or DropTargetExtender to an ASP.NET Server Control (this is the "limitation", it must be a server side control), set the DragType, DropType, DragValue and DropValue as required and create a callback method in the OnClientDrop "event handler"/callback on the drop target.

The callback signature is:

/// <summary> 
/// Client-side drop event handler/callback method signature 
/// </summary> 
/// <param domelement="false" type="Veggerby.DropTargetBehavior" name="sender" /> 
/// The DOM element the drop is associated with 
/// </param> 
/// <param domelement="false" type="Veggerby.DropEventArgs" name="e" /> 
/// EventArgs for the drop operation, includes references to DragSource and DropTarget 
/// </param> 
function OnClientDrop(sender, e) 
{ 
}

Future enhancements could/would include allowing a service call on a successful drop, however currently this can be (easily) achieved manually in an OnClientDrop callback.

Download the source code here.