In this post I am going to outline a quick example of using the jQuery UI framework to enable elements on your SharePoint page to be dragged around. This would probably work in SP 2007 too but I have some plans to apply this to the Ribbon control in the near future.

What we are building:

A Visual Web Part (Web Part + User control) that will contain a div element with a blue border and “Drag me around” text. The blue box can be dragged around the page by the user. Simple enough.

Step 1 – Create a new Visual Web Part project in VS2010. There are already many articles on this subject so I will allow you to just go ahead and Google this if you need to.

Step 2 – Download and reference jQuery and JQuery UI.
  There are a number of ways to do this. I chose to simply download the files and drop them in the layouts folder of the 14 hive. You can also directly link to them on Google. Here are my references:

<script type="text/javascript" src="_layouts/jquery.min.js"></script>
<script type="text/javascript" src="_layouts/ui.core.js"></script>
<script type="text/javascript" src="_layouts/ui.draggable.js"></script>

Step 3 – The rest of the code in the Visual WebPart
  To finish off the Visual WebPart (remember that is just a user control) add this code:

<script type="text/javascript">
    $(document).ready(function () {
        $("#draggable").draggable();

    });
</script>

<div class="demo">
    <div id="draggable" style="width: 150px; height: 150px; padding: 0.5em; border:1px solid blue">
        <p>Drag me around</p>
    </div>
</div>

The JavaScript function just attaches the draggable function to any elements with an id equal to “draggable” when the HTML document finishes loading. The html code is the element that we are going to allow the user to drag plus some styling.

Step 4 – Deploy
  Just right click on the solution and select Deploy. Then create a page and add your new Web Part to the page.

A few final comments about this. The way I deployed the js files is bad. And you would never want to do that in a real-world scenario. Instead you would want to add those as part of the feature and wsp. And you can also create a specific jQuery UI JavaScript file that contains all the features you want in one file. Here I just copied the draggable JavaScript file to the layouts folder. Also don’t forgot to explore the jQuery UI for cool options besides the plan drag example I am using here.