.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.

Other Related Items:

jQuery in Action

A good web development framework anticipates what you need to do and makes those tasks easier and more efficient; jQuery practically reads your min... Read More >

Super Soft Luxury Cashmere Feel Fringe Scarf - (Choose from 33 fashion colors / patterns)Experience the soft luxurious feel of cashmere feel fashion neckwear. Get the look and feel of high end scarves at an affordable price. Choose from ou... Read More >

jQuery: Novice to Ninja

jQuery: Novice to Ninja is a compilation of best-practice jQuery solutions to meet the most challenging JavaScript problems. In this question-and-a... Read More >

Related Post

• jQuery 1.4 Released
• jQuery and ASP.NET UpdatePanel
• jQuery, Each() and Async Gets
• JQuery, Cufon, and Dynamic Content
• Flash to jQuery

Bookmark to:

Hide Sites

One Response to “jQuery GUI – Drag”