Drag and Drop Control Extenders

nosey — Wed, 16 Jan 2008 21:48:07 +0000

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:

///

/// Client-side drop event handler/callback method signature
///

///
/// The DOM element the drop is associated with
///
///
/// EventArgs for the drop operation, includes references to DragSource and DropTarget
///
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.

Veggerby : IBlog » ASP.NET AJAX

Drag and Drop Control Extenders