jQuery GUI – Drag

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

image

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 post in jQuery

Like this Article? Subscribe to get every article sent to your email.

Related Post

  • jQuery SplitterjQuery Splitter Hey!  This is pretty cool. I was just mentioning at the last jQuery presentation I did that there were some controls that were definitely missing from the jQuery UI suite of […]
  • Host jQuery at Google (with Intellisense support)Host jQuery at Google (with Intellisense support) While reviewing my RSS feed this morning, I found this article:3 reasons why you should let Google host jQuery for you | EncosiaI had no idea!The three reasons […]
  • jQuery – Date PickerjQuery – Date Picker Today we’ll start taking a look at the final control in the jQuery UI suite.  The Date Picker. This control, as with all the other controls we’ve looked at, is relatively simple […]
  • jQuery – DialogjQuery – Dialog Ever since pop-up windows became “evil” in the web development world, developers have been looking for other ways to achieve the same effect.  The most common method is to use some […]
  • jQuery UI – Resizable w/ ASP.NET ThemesjQuery UI – Resizable w/ ASP.NET Themes If you've been up to the jQuery web site and looked at the documentation for resizable() you probably thought, "hey, no problem, I can do that."  Well, that's what I thought, too, until I […]

About Dave Bush

Dave Bush is a .NET programmer and Certified ScrumMaster who is passionate about managing risk as it relates to developing software. When he is not writing or speaking about topics related to Application Lifecycle Risk Management (ALRM), he is an example to his peers as he develops web sites in the ASP.NET environment using industry best practices.

One Pingback/Trackback