Home » jQuery » jQuery GUI – Drag

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:

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>

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() {

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 – 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 – 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 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 Full Stack ASP.NET developer. His commitment to quality through test driven development, vast knowledge of C#, HTML, CSS and JavaScript as well as his ability to mentor younger programmers and his passion for Agile/Scrum as defined by the Agile Manifesto and the Scrum Alliance will certainly be an asset to your organization.

One Pingback/Trackback