.NET Answers

About a year and a half ago I helped develop an application that required drag and drop functionality.  We used the MS-AJAX framework to implement it at the time because it was available and did what we basically wanted.

But now that I’m looking at what is available with jQuery, I really wish we had a chance to do it over.  I think we could have done a much better job and done it in less time.

Before we get started, you’ll want to download the current jQuery UI stuff from http://ui.jquery.com/ or just use what is included in your project directly from Google.  You can get the current URLs for the current version here:
http://code.google.com/apis/ajaxlibs/documentation/

I’ve set up a very simple HTML form:

<form id="form1" runat="server">
<div id="moveMe"
style="width:100px; height:100px; border: solid 1px black">
Here is some content</div>
</form>

That looks like this in the browser:

To make this draggable, all we need to do is to add the following code in our ready() event:

$(document).ready(function() {
    $("#moveMe").draggable();
}
);

There are other parameters that allow you to:

• Constrain the drag to an axis
• Prevent dragging within a certain element (INPUT for example) contained within the draggable element.
• Constrain the drag to within the bounds of another element
• Specify the cursor to use during the drag
• Connect the drag to a sortable list of selectors.
• Position the cursor relative to the element during the drag
• Specify how long to wait until the drag starts or how many pixels to move before the drag starts to avoid unwanted drags.

and more…

Check the documentation at http://docs.jquery.com/UI/Draggable for more information.