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

jQuery Cookbook: Solutions & Examples for jQuery Developers (Animal Guide)

jQuery simplifies building rich, interactive web frontends. Getting started with this JavaScript library is easy, but it can take years to fully re... 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 >

Related Post

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

Bookmark to:

Hide Sites

One Response to “jQuery GUI – Drag”