Veggerby : IBlog | Low decoupling, highly incoherent

TAG | control extender

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 name="sender" type="Veggerby.DropTargetBehavior" domElement="false">
/// The DOM element the drop is associated with
/// </param>
/// <param name="e" type="Veggerby.DropEventArgs" domElement="false">
/// 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.

· ·

Theme Design by devolux.nh2.me