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

Related Post

One Response to “jQuery GUI – Drag”

Leave a Reply

Comment Policy:

  • You must verify your comment by responding to the automated email that is sent to your email address. Unverified comments will never show.Leave a good comment that adds to the conversation and I'll leave your link in.
  • Leave me pure spam and I'll delete it.
  • Leave a general comment and I'll remove the link but keep the comment.

Notify me of followup comments via e-mail