How to: Drag and Drop Objects in Silverlight

  • Article

The following example below shows how to drag and drop objects around a Microsoft Silverlight-based application. For security reasons, Silverlight does not allow you to drag and drop objects between applications. Therefore, it is more accurate to say that you "slide" objects within the Silverlight plug-in area. However, the term "drag and drop" is better known and therefore used in this document.

XAML 
<Canvas xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Width="300" Height="300" x:Name="rootCanvas" Background="Gray">
  <!-- You can drag this rectangle around the canvas. -->
  <Rectangle 
   MouseLeftButtonDown="handleMouseDown" 
   MouseMove="handleMouseMove"
   MouseLeftButtonUp="handleMouseUp" 
   Canvas.Left="30" Canvas.Top="30" Fill="red" 
   Width="50" Height="50" />
</Canvas>
JavaScript 
// Global variables used to keep track of the 
// mouse position and whether the object is captured
// by the mouse.
var isMouseCaptured;
var mouseVerticalPosition;
var mouseHorizontalPosition;
function handleMouseDown (sender, args) 
{
  var item = sender;
  mouseVerticalPosition = args.getPosition(null).y;
  mouseHorizontalPosition = args.getPosition(null).x;
  isMouseCaptured = true;
  item.CaptureMouse();
}
function handleMouseMove (sender, args) 
{
  var item = sender;
  if (isMouseCaptured) 
  {
    // Calculate the current position of the object.
    var deltaV = args.getPosition(null).y - mouseVerticalPosition;
    var deltaH = args.getPosition(null).x - mouseHorizontalPosition;
    var newTop = deltaV+ item["Canvas.Top"];
    var newLeft = deltaH+ item["Canvas.Left"];
    // Set new position of object.
    item["Canvas.Top"] = newTop;
    item["Canvas.Left"] = newLeft;
    // Update position global variables.
    mouseVerticalPosition = args.getPosition(null).y;
    mouseHorizontalPosition = args.getPosition(null).x;
  }
}
function handleMouseUp (sender, args) 
{
  var item = sender;
  isMouseCaptured = false;
  item.ReleaseMouseCapture();
  mouseVerticalPosition = -1;
  mouseHorizontalPosition = -1;
}

As mentioned previously, you can only drag the object within the Silverlight plug-in. If you attempt to drag the object outside this area by using the example code, the state of the object will be lost. In the following code, the handleMouseMove function is modified so that when the user attempts to move the object outside its containing Canvas, the object loses mouse focus.

JavaScript 
function handleMouseMove (sender, args) 
{
  var item = sender;
  if (isMouseCaptured) 
  {
    
    var root = sender.findName("rootCanvas");
    // Find the limits of the containing Canvas. 
    var horizontalLimit = root.width - item.width;
    var verticalLimit = root.height - item.height;
    // Calculate the current position of the object.
    var deltaV = args.getPosition(null).y - mouseVerticalPosition;
    var deltaH = args.getPosition(null).x - mouseHorizontalPosition;
    var newTop = deltaV+ item["Canvas.Top"];
    var newLeft = deltaH+ item["Canvas.Left"];
    // If the calculated object position is still within the 
    // boundaries of the Canvas, update the object's position.
    // If it is outside the boundaries, cut mouse capture.
    if (newTop < verticalLimit && newLeft < horizontalLimit)
    {
      item["Canvas.Top"] = newTop;
      item["Canvas.Left"] = newLeft;
      mouseVerticalPosition = args.getPosition(null).y;
      mouseHorizontalPosition = args.getPosition(null).x;
    }
    else
    {
      isMouseCaptured = false;
      item.ReleaseMouseCapture();
    }
  }
}

See Also

Forum Post
Silverlight Mouse Support
Overviews and How-to Topics