Drag and drop Silverlight example

Posted by Corey on August 13, 2008 at 9:34 pm.

This is a quick and simple example of how to create a draggable object in Silverlight 2.

Create a Rectangle and set the RenderTransform to a TranslateTransform.

Register the MouseLeftButtonDown, MouseLeftButtonUp, and the MoseMove events for the rectangle.
In the MouseLeftButtonDown and MouseLeftButtonUp event you will capture and release the capture of the mouse, respectively. Also, you will need to store if the mouse is captured.

Finally, update the position if the mouse is captured and the mouse is moving.

Final product:

Maintain mouse position on object while dragging

The above example snaps the pointer to the top left of the object. Face it, it’s annoying, what you really want is the mouse to maintain the position on the element while dragging. To solve this problem is simple.

Add a variable to save the position when the user clicks the object.
Save the position of where the mouse is located on the MouseLeftButtonDown event. The updated MouseLeftButtonDown event looks like:
Finally, in MouseMove event subtract the clickPosition from the mouse position.

Update

Drag and drop with physics (friction)

After playing around, I have updated this example to incorporate physics. Take a look:

http://www.85turns.com/silverlight/drapDropPhysics.html

23 Responses to “Drag and drop Silverlight example”

Dew Drop - August 14, 2008 | Alvin Ashcraft's Morning Dew (Pingback) Says:
August 14th, 2008 at 1:52 pm

[...] Drag and Drop Silverlight Example (Corey Schuman) [...]

Anna Says:
August 17th, 2008 at 10:57 am

It really is made simple! Thanks a lot for this tutorial.

koenvosters Says:
August 18th, 2008 at 1:38 pm

Nice work mate, makes it simple, gonna make sure it now snaps itself into a grid and then we got something that is really useful in applications.

cschuman Says:
August 18th, 2008 at 3:14 pm

Thanks for the suggestion. I have just completed adding friction to this example. Snapping to a grid will be my next example. I’ll post when I am finished.

pierre Says:
August 18th, 2008 at 3:43 pm

you are wrong :
this.rect.MouseMove += new MouseEventHandler(rect_MouseMove);
you must attach the page mousemove event… if you don’t do that, when you move your cursor quickly your drag stop.

cschuman Says:
August 18th, 2008 at 7:20 pm

pierre, I haven’t experienced this problem. Registering MouseMove for only the rectangle takes care of business.

simon Says:
August 22nd, 2008 at 12:12 pm

Thanks for the example!
I found that with this code you need to place your dragable object in the exact top left corner (0,0) for the mouse offset to work properly (try starting the box off in the middle of the screen, it jumps around just like when there was no offset!).
If you want the box to start in the middle, place it in the top corner and then also give it an initial translation as to appear in the middle.

Sundeep Says:
September 11th, 2008 at 1:24 pm

Hi,

Awesome Job! Great thanks for the example. Can you please let us know how did you manage to create such drag and drop effect in physics example.

Thanks,
Sundeep.

Another 3D example in Silverlight « Silverlight made simple (Pingback) Says:
September 22nd, 2008 at 9:45 pm

[...] 2.) Click the Move button to enable the move tool. Once you have clicked this the cursor becomes an Hand indicating you can click and drag on the screen to move the objects around. The technique I’m using for this is similar to a previous post - Drag and drop Silverlight example. [...]

Tomy Says:
November 23rd, 2008 at 3:09 am

Thanks! great begginers stuff!

DangerousDave Says:
May 19th, 2009 at 7:29 am

Hi Mr.Corey,
Thanks for the simple and good example.
Please forward new updates to my email address.

Thanks.

Martien de Jong Says:
June 3rd, 2009 at 7:47 am

Very useful indeed!Thanks!

paaru Says:
June 11th, 2009 at 4:00 am

Hi Corey,
Thank you for making drag and drop too simple
But i’m sorry to say that this works only when the element is at top left of the page.
Please let me know if any solution comes up

Regards,
paaru

Collection of Best Most Interesting Silverlight Tutorials | guidesigner.net (Pingback) Says:
July 1st, 2009 at 4:48 am

[...] Drag and drop Silverlight example [...]

hanuman Says:
July 2nd, 2009 at 12:38 am

very nice demo for starters… keep it up

Jason Young Says:
August 4th, 2009 at 2:57 am

Just open sourced our (almost) WPF compatible drag and drop framework for those interested http://blogs.imeta.co.uk/jyoung/archive/2009/07/21/726.aspx