This article is meant to show the benefits of sound Javascript programming with your Silverlight Applications. It is not an introduction to Silverlight, XAML or Javascript. For an introduction to Silverlight, and its programming object model visit the Silverlight quickstarts.

Problem
Drag and Drop interaction is one of the simplest ways you can improve your basic Silverlight 1.0 RC application. Microsoft has a great sample on MSDN, that shows you how to implement it step by step (click here). However, once you start building a fairly complex Silverlight user interface, you come to the realization that you’re going to have to re-write this code over and over again for every single element on your canvas that you're going to want to enable drag and drop functionality for.

Solution
Javascript allows us to design re-usable objects using object oriented techniques. So our goal should be to re-factor all code related to the dragging and dropping interaction into a re-usable javascript class.

Action
Lets start by describing the elements of a simple XAML file that we will be enabling drag and drop functionality for.  As you can see in the following code snippet, the xaml has two visual elements defined within it, a rectangle and a textblock that is layered on top of the rectangle, giving the illusion of a fancy label. Additionally, there is a small rectangle that we will be using as a handle where users will click to start the dragging process.

If we wanted to enable simple drag and drop functionality for this item (as described in MSDN).  We would have to handle the following events, in order to perform the following tasks:

1.    MouseLeftButtonDown: Use captureMouse method to capture all mouse related events to the element that fired the event. Additionally, persist original mouse coordinates.  Finally, set flag to enable dragging.

2.   MouseMove: Using original persisted coordinates relocate element to new location within its container.  Additionally, persist current mouse coordinates as original.

3.    MouseLeftButtonUp: Release exclusive mouse event handling using releaseMouseCapture method.  Finally, set flag to disable dragging.

See the following snippet.

And again this a fairly simple operation but what if we wanted to add a second, or third element, in the Silverlight user interface that required additional  drag and drop functionality. If we follow the current code pattern we would have to add additional handlers in the handleLoad method, and additional methods for every single element. For anybody who’s been involved in programming for more than 24 hours, these should probably be a sign that some smart re-factoring needs to be done. 

So I started refactoring and adding additional functionality to the original MSDN sample, and I came up with the following Javascript Class. 

This Javascript Class solves two problems when developing Silverligth Aplications:

1.- It allows the programmer to enable drag and drop functionality to any Silverlight user interface element with just a couple of lines of code.
2.- It also provides helper methods to determine the Canvas.Top, Canvas.Left coordinates of any element related to its parents container (usually a Canvas), or to Silvelight Host control.  

The following is a code snippet for enabling drag and drop functionality for the original xaml user interface in the top of this post.

You can download from this post a project with several samples on how to use the SilverlightDragDropExtender Javascript class.

Thank you for reading,