Implementing Drag-Drop in ASP.NET AJAX

Back to all blogs

Introduction to Drag-and-Drop in Web Applications

Drag-and-drop is a key interactive feature in modern web applications, allowing users to move elements visually on a page. While this example uses the ASP.NET AJAX Library, today developers often use Blazor, React, Angular, or Vue for similar functionality.

This article explains the concepts using the original ASP.NET AJAX approach while highlighting patterns that are still relevant in modern frameworks.

Creating a Drag Source

A drag source is any DOM element that can be picked up and moved. In the ASP.NET AJAX Library, this is done by implementing the IDragSource interface. For example, color swatches can be made draggable by deriving a class from Sys.UI.Behavior and defining the drag behavior:

var source1 = new Custom.UI.ColorDragSourceBehavior($get(‘RedDragSource’), ‘red’);
source1.initialize();

Key features include:

  • Handling mousedown events to start dragging

  • Creating a visual clone of the element

  • Integrating with Sys.Preview.UI.DragDropManager

Creating a Drop Target

A drop target is where the dragged element can be placed. Implementing the IDropTarget interface allows:

  • Accepting only compatible data types

  • Highlighting the target during drag-over

  • Performing actions when a drop occurs, such as changing the background color

var target = new Custom.UI.ColorDropTargetBehavior($get(‘DropTarget’));
target.initialize();

Modern Drag-and-Drop Alternatives

While the ASP.NET AJAX Library is outdated, the patterns above translate to modern frameworks:

  • React: Use react-dnd or HTML5 Drag API

  • Angular: Use @angular/cdk/drag-drop

  • Blazor: Use BlazorStrap or custom JS interop

These frameworks handle events and DOM updates more efficiently and are compatible with modern browsers.

Best Practices for Drag-and-Drop

  • Always separate presentation logic from business logic.

  • Provide visual feedback during drag operations (highlight, opacity changes, cursor changes).

  • Validate drop targets to ensure only allowed data types are accepted.

  • Consider accessibility: ensure keyboard and screen reader support.

Conclusion

Drag-and-drop remains an essential interaction pattern. Understanding legacy approaches like ASP.NET AJAX gives context for modern implementations in frameworks like React, Angular, or Blazor, while maintaining good patterns for reusable, testable components.

Stay Informed

Sign up for the latest blogs, events, and insights.

We deliver solutions that accelerate the value of Azure.
Ready to experience the full power of Microsoft Azure?
Start Today