The Ajax Control Toolkit includes a DropPanel Control Extender that lets you drag and drop content thereby moving it around on your web page [ more HERE ]. 

jQuery, or more specifically jQueryUI has Drag-and-Drop built-in.

Yup – like a lot of stuff in this series that means it’s just REALLY easy to get the effect you want using jQuery

Since this series is about showing how to do with jQuery the sort of things you would have previously done with the Ajax Control Toolkit, I’m going to defer catching the “drop” events to a future entry.

Here is the effect we’re looking for.

 

Drag and Drop …..

After including jQuery and jQUeryUI  (script & CSS) here is the code for the page.


[sourcecode language=”html”]
<%@ Page Title=’Home Page’ Language=’C#’ MasterPageFile=’~/Site.master’
AutoEventWireup=’true’ CodeFile=’Default.aspx.cs’
Inherits=’_Default’ %>

<asp:Content ID=’HeaderContent’ runat=’server’
ContentPlaceHolderID=’HeadContent’>
<link href=’Styles/jquery-ui-1.8.13.custom.css’ rel=’stylesheet’
type=’text/css’ />
</asp:Content>
<asp:Content ID=’BodyContent’ runat=’server’
ContentPlaceHolderID=’MainContent’>
<h2>Draggable Panel !</h2>
<br />
<div class=demo>
<div id=draggable class=ui-widget-content>
<p>
<br />
I’m an AJAX Draggable Container.
<br /><br />
You could catch drop events and build a configurable UI.

</p>
</div>
</div>

<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris varius ullamcorper lacus, ac pharetra libero commodo eu.
Aenean auctor imperdiet libero, sit amet scelerisque lorem placerat
quis. Phasellus pretium, lacus eget euismod cursus, nunc nibh semper
urna, at blandit elit nisl non dui. Sed blandit dignissim tellus,
in egestas orci facilisis vel. Curabitur consequat ante vel mauris
accumsan rutrum. Aliquam lorem est, ornare eget mollis sit amet,
vestibulum et diam. Phasellus cursus massa sodales metus
luctus sed blandit quam rhoncus. Proin nunc risus, scelerisque eu
sagittis in, gravida vitae lectus. Maecenas et ipsum ac mauris
condimentum accumsan ac et ligula. Phasellus mattis, tortor quis
rutrum mollis, ante eros dictum leo, ac venenatis augue nisl sit
amet mauris. Maecenas cursus, arcu nec egestas molestie, leo
lectus pellentesque sapien, eu sollicitudin urna dolor vitae
nisl. Proin lobortis, tortor quis congue lacinia, arcu elit
consequat erat, vestibulum aliquet lorem massa sed leo. Suspendisse
volutpat odio in mauris cursus aliquam. Nullam sed sapien sit amet mi
laoreet sagittis. Integer rutrum lacus quis felis venenatis porta.
</p>
</div>

<script src=’Scripts/jquery-1.4.1.js’ type=’text/javascript’></script>
<script src=’Scripts/jquery-ui-1.8.1.custom.min.js’
type=’text/javascript’>
</script>

<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>

<script type=’text/javascript’>
$(function () {
$(‘#draggable’).draggable();
});
</script>
</asp:Content>

[/sourcecode]


All we’re doing here is specifying a class to apply to the area that we want to be draggable then using a jQuery selector to access any page element that uses that class and calling the jQueryUI dragable() method.

Have fun !